large empty space for inline-block div
I am trying to put two divs side by side by using inline-block. For some reason, I am seeing a large empty space at one of the divs.
I have created a pen at http://codepen.io/weima/pen/eKEbD
The problematic div is the one with class .input-area. The empty space is gone if I remove
display:inline-block from .input-area css, but then I wont be able to put these two divs side by side.
Is there anyway to solve this without using
You could add
vertical-align:top to the element in order to fix the alignment issues.
The default value to the
vertical-align property is
baseline. If you are curious as to what this does, take a look at this answer.