Same height for adjacent elements with different font sizes

Question

I have two elements with text, and the all text should align at the bottom.

I'm conditionally hiding/showing of the elements with Javascript, which causes the elements to jump as they have different font sizes.

Is it possible to have elements next to eachother taking up the same height, when having different font sizes and at the same time align the text to the bottom?

.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

I solved it by giving the parent element the same height as the tallest child.

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>