Center different amounts of text inside divs with flexbox and keep the divs aligned

Question

I have 3 inline div blocks.

When I have different amounts of text inside the div, it looses its alignment. Some white space appears at the top.

Why is that and what can I do to solve it?

Thanks!

body {
  font: 36px Arial, sans-serif;
}
.container-outer {
  display: inline-block;
}
.container {
  color: white;
  background: #ffbd17;
  width: 200px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  background: #06c;
}

<div class="container-outer">
  <div class="container">
    <div class="content">
      Line 1
    </div>
  </div>
</div>
<div class="container-outer">
  <div class="container">
    <div class="content">
      Line 1<br>
      Line 2
    </div>
  </div>
</div>
<div class="container-outer">
  <div class="container">
    <div class="content">
      Line 1
    </div>
  </div>
</div>