HTML: <input> element changes position after user input

Question

I am building a web-based, self-quizzing application, but I'm having some troubles out of my input form. I have it structured such that each input element has its own cell in a table. I'm including a picture for reference. The table alternates columns of numbers and input elements. I did this mainly for ease of aesthetic structure.

Unfortunately, those aesthetics are messed up whenever a user enters a string into the input element. The elements move closer to the bottom of the page once a user has entered a string and then tabbed to the next input element. I'm including another picture for reference.

Does anyone have any idea what could be causing this error? I'm happy to update with any details necessary concerning the markup, css, or jQuery.

Answer 1

The culprit seems to be

vertical-align: baseline;

in CSS