Two divs with inline-block style not aligned

Viewed 1944

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:

enter image description here

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

2 Answers
Related