Interactive card using JavaScript and CSS

Question: I have used %ages for sizes and margins and every thing, Is this a good practice to do so or should I fix the dimensions of every thing ?

The problem I faced while styling is despite of defining display: absolute; the position attribute isn't working, I fixed it by hit and trial but don't know how it get fixed. Any one can help?

What I learned: how to transfer data from input fields to any thing else using javaScript, and clear the input again.