Two divs with inline-block style not aligned

Question

I have two div tags and only one has input tag; why output is in this way?

div.logo, div.form { 
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 1px dotted;
}

<div class="logo">
  <input type="text">
</div>

<div class="form">
</div>

Output:

Can anyone explain this? Here is the fiddle: https://jsfiddle.net/ag487L5m/

Answer 1

By default, inline and inline-block elements are set to vertical-align: baseline.

Since your div.logo has a text input, div.form which is now an inline-block element, aligns itself on the baseline of the input.

Adding vertical-align: top to the CSS should fix it. As in:

div.logo, div.form { 
    display: inline-block;
    height: 200px;
    width: 200px;
    border: 1px dotted;
    vertical-align: top;
}

div.logo, div.form { 
    display: inline-block;
    height: 200px;
    width: 200px;
    border: 1px dotted;
    vertical-align:top;
}

<div class="logo">
  <input type="text">
</div>

<div class="form">

</div>

Answer 2

That's because the vertical alignment of inline elements defaults to baseline. Change it to top:

div.logo, div.form { 
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 1px dotted;
  vertical-align:top;
}

div.logo, div.form { 
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 1px dotted;
  vertical-align:top;
}

<div class="logo">
  <input type="text">
</div>

<div class="form">

</div>