I am not a designer but I am dealing with a task to implement a functionality. I have to develop a working UI where a user can enter values into text-boxes inside a grid. While entering these values the user should have a reference value, which is different for each text-box in the grid. I therefore want to design a text-box where the user sees the reference value while entering the values. Can anyone suggest a good design to solve this problem?
What I have thought of is having a custom text-box with an uneditable label on the top left of the text-box, while the other area of the text-box is editable (to enter the value).
So as seen in the image above, the top left is where I will show the value to be referred, while the white space is a text-box where the user can enter the value.
Below is another image with what I want to finally achieve:
If my proposed solution is a good one then how do I implement it? Are there other solutions anyone can suggest?