Question

I am making a web app that utilizes two textareas, and when a button is clicked one of the textareas is replaced with a div using JavaScript. I am trying to get the div inserted onto the page in the exact position as its textarea predecessor so the user doesn’t notice the switch, but for some reason it’s not as easy as it should be. The vertical position of the div seems to change based on the content within it. I have a feeling it has to do with

display: inline-block;

in my CSS file, but that’s needed to keep the two textareas horizontally centered without a fixed width.

Any help would be appreciated.

The web app can be found on my site: http://lobian.co/code/remove-attributes/. To view the problem, input any amount of text in the left textarea then click “Remove Attributes”. The div in question will replace the textarea.

UPDATE:
Musa’s answer below fixed the problem.

Answer 1

Just give both elements the same vertical-alignment, eg vertical-align:top

DEMO