布局。两个带内容的内联框，其中一个分为其他框

Question

期望的结果：类inline的两个div应该在同一水平面上（第二个包含两个带有一些内容的div）。

但是，如下所示，两个div不是垂直对齐的。如果我从.inside div中删除内容（单词“text”），它们会按预期排列。

如何让它们排成一行？造成这种情况的原因是什么？

.inline,
.inside {
  margin: 0;
  padding: 0;
  width: 100px;
  height: 100px;
}
.inline {
  display: inline-block;
  background-color: chartreuse;
}
.inside {
  height: 48px;
  background-color: salmon;
  border: solid 1px black;
}

<div class="inline">
</div>

<div class="inline">
  <div class="inside">text</div>
  <div class="inside">text</div>
</div>

<hr>
<div>Without content (i.e. the word "text"):<div>
<div class="inline">
</div>

<div class="inline">
  <div class="inside"></div>
  <div class="inside"></div>
</div>

Answer 1

.inline {    
vertical-align: top;
}

谢谢大家。