Horizontal align text below flex-items - flexbox

Question

Image captions are aligned bottom by flexbox within a gallery where images have different heights. How can I achieve that first lines of text (titles) are aligned horizontally?
<style type="text/css">
* {
box-sizing: border-box; }
.flex-container {
display: flex;
flex-wrap: wrap; }
.flex-item {
width: 50%;
padding: 20px;
display: flex;
flex-direction: column; }
.flex-item img {
width: 100%;
height: auto; }
.flex-image {
flex: 1 0 auto; }
</style>
<div class="flex-container">
<div class="flex-item">
<div class="flex-image">
<img src="img-1.jpg" alt="" />
</div>
<p>title</p>
</div>
<div class="flex-item">
<div class="flex-image">
<img src="img-2.jpg" alt="" />
</div>
<p>title<br>Lorem ipsum dolor sit amet.</p>
</div>
</div>
Please check my codepen: https://codepen.io/tinusmile/pen/MoeORG
Many thanks!

Answer 1

With the existing markup, where the images can have different heights, you need to do something like this, where you give the p a height.
As an element's overflow defaults to visible, it will flow out of its boundaries, so I recommend to set the height so it can accommodate 2-3 lines of text.
On smaller screens you might need to add a #media query to adjust that height, as if the text is very long it might overflow any element below itself.
.flex-item p {
height: 50px; }
Updated codepen
Note, using min-height instead would solve the might overflow any element below itself issue, though it will make the first line to not align horizontally if the value does not accommodate all the possible amount of lines.
Another option is to remove the flex-item wrapper and use Flexbox's order property, as I suggested in a previous question of yours, align-horizontally-3-elements-over-3-divs