I'm currently developing a web-based self-quizzing application, but I've encountered an issue with my input form. Each input field is placed in its own cell within a table for organization purposes. To maintain an aesthetically pleasing structure, I have alternated columns between numbers and input fields. For visual reference, please see the attached image.
However, whenever a user enters a string into one of the input fields, the layout gets disrupted. The elements appear to shift downwards once the user tabs to the next input field. Refer to the second image for clarification.
If anyone has insights on what might be causing this issue, I would greatly appreciate it. I am willing to provide more information such as markup, CSS, or jQuery details upon request.