html - 具有不同字体大小的相邻元素的相同高度

Question

我有两个带有文本的元素，所有文本都应该在底部对齐。

我使用 Javascript 有条件地隐藏/显示元素，这会导致元素跳转，因为它们具有不同的字体大小。

当字体大小不同并且文本与底部对齐时，是否可以让彼此相邻的元素占用相同的高度？

.alpha {
  background-color: green;
  font-size: 15px;
}

.beta {
  background-color: pink;
  font-size: 30px;
}

<div>
  <span class="alpha">Alpha</span>
  <span class="beta">......</span>
</div>

Answer 1

我通过给父元素设置与最高子元素相同的高度来解决这个问题。

div {
  font-size: 30px;
}

.alpha {
  background-color: green;
  font-size: 15px;
}

.beta {
  background-color: pink;
  font-size: 30px;
}

<div>
  <span class="alpha">Alpha</span>
  <span class="beta">......</span>
</div>