Align text of different size to the bottom

Question

I have two divs with text of different sizes, that I want to align to the bottom.

They do successfully get aligned to the bottom of their parent, but they're not aligned evenly to each other.

Is this solvable?

.container {
  display: flex;
  height: 50px;
  background: pink;
}

.large, .small {
  align-self: flex-end;
  margin-right: 5px;
}

.large {
  font-size: 30px;
}

.small {
  font-size: 15px;
}

<div class="container">
  <div class="large">Large</div>
  <div class="small">Small</div>
</div>

Answer 1

As per @Johannes answer it's a good idea to wrap both text divs in another container. But you don't need an align-self: flex-end; declaration for the .inner-container, just add align-items: flex-end; to the parent div. That way, you get one CSS rule less.

display: inline;, like display: inline-block, makes items align themselves by their baselines (based on the item with the biggest height, in this case the .large text) so you could change the <div class="large"> and the <div class="small"> to spans instead of divs. Since the default display property of <span> is inline, you can then skip the display declaration of .large and .small:

.container {
  display: flex;
  height: 50px;
  background: pink;
  align-items: flex-end;
}

.large, .small {
  margin-right: 5px;
}

.large {
  font-size: 30px;
}

.small {
  font-size: 15px;
}

<div class="container">
  <div class="inner-container">
    <span class="large">Large</span>
    <span class="small">Small</span>
  </div>
</div>