Two divs with inline block not aligned

Question

I have two tags div, and only one has a tag input; why the conclusion is 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>

Run codeHide result

Conclusion:

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

Answer 1

By default, inlineand are inline-blockset to vertical-align: baseline.

Since yours div.logohas text input, div.formwhich is now an element inline-block, aligns to the baseline input.

Adding vertical-align: topto CSS should fix this. How 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>

Run codeHide result

Answer 2

, . :

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>

Hide result