html - 当它们的高度不同时，为什么第一个跨度会进入第二个跨度的底部？

Question

我有这个 HTML:

.one{
  display: inline-block;
  width: 80px;
  border: 1px solid;
}

.two{
  display: inline-block;
  width: 100px;
  border: 1px solid;
}

<span class="one"> Explanation: </span>
<span class="two">There is some explanation about something. There is some explanation about something</span>

如您所见，EXPLANATION 一词位于.two 框的底部。我怎样才能把它放在最前面？这是预期的结果:

Answer 1

vertical-align: top; 拯救!

.one{
  display: inline-block;
  width: 80px;
  border: 1px solid;
  vertical-align: top;
}

.two{
  display: inline-block;
  width: 100px;
  border: 1px solid;
}

<span class="one"> Explanation: </span>
<span class="two">There is some explanation about something. There is some explanation about something</span>