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 float?


solution

You could add vertical-align:top to the element in order to fix the alignment issues.

UPDATED EXAMPLE HERE

.input-area {
  vertical-align: top;
  display: inline-block;
  width: 450px;
  border: 1px solid green;
}

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.