Since the editable figures belong to the same context as the non-editable data and should be comparable with them, they should have the same basic layout. This is not just about right alignment.
If you use the input element for editable data, this will have many implications on rendering: different font family, different font size, nonzero padding or margin, a border around, a fixed width (typically suitable for 20 digits), and maybe something else. There are various ways around this, like setting several CSS properties on input in order to make it similar to normal text, or putting the non-editable data to input elements, too, just with the readonly attribute.
If you use normal text content instead, just with the contenteditable attribute, it becomes much simpler to make editable and non-editable data similar, just with some controlled way of highlighting the latter. On the other hand, submitting data as part of form data will take more work then. But this does not matter if you are really doing all the processing in a browser and do not submit the form at all.
Then there’s the question how to make it evident to the user which data is editable. Using just white background is not sufficient especially if you have alternating colors for rows with non-editable data, as in your example. Using the outline property, to draw a colored outline around the item, is one possibility; outline differs from border by not affecting the layout of the page at all – the outline is like an extra layer set over basic content. But some (very) old browsers do not support outline. (And you should probably make the color of the outline different for an element that has focus.)
Then there is the issue of accessibility. Should this work even when CSS is disabled, and when used with assistive software like screen readers? Then the clumsy way of using input for editable data is certainly the most robust.
So there are quite a few parameters in the situation that need to be considered before an informed decision can be made.
