Align the bottom of images on different columns(Bootstrap) - html

Question

On my website I have 3 bootstrap columns and each has a photo at the end. The problem is that the titles have different lengths and because of that when I resize the browser (at 1100px width) one of the pictures and the paragraph above it shift a little bit lower then the other 2. Is it possible to align the photos and pragraphs at the bottom and the title at the top?
Here is a JsFiddle of the problem I have
I don't now why but in JsFiddle the columns are all in one column and not multiple (like on a mobile device) but maybe if you save it and then open it in your browser you can see the problem.
HTML:
<div class="container-fluid">
<div class="row ">
<div class="col-md-4 column">
<center>
<h1>Babababababababababababababa</h1>
<p>2013 - Now</p>
<div>
<div class="container-images"> <img class="image" src="https://iso.500px.com/wp-content/uploads/2016/05/stock-photo-93725859-1500x1000.jpg">
<div class="over">
<p class="title">aaa</p>
<p class="rayal">aaaaaa</p>
</div>
</div>
</div>
</center>
</div>
<div class="col-md-4 column">
<center>
<h1>Bababababababababababababababababa</h1>
<p>2009 - 2013</p>
<div class="container-images"> <img class="image" src="https://iso.500px.com/wp-content/uploads/2016/05/stock-photo-93725859-1500x1000.jpg">
<div class="over">
<p class="title">aaa</p>
<p class="rayal">aaaaa</p>
</div>
</center>
</div>
<div class="col-md-4 column">
<center>
<h1>Babababababababababababababab</h1>
<p>2007 - 2009</p>
<div class="container-images"> <img class="image" src="https://iso.500px.com/wp-content/uploads/2016/05/stock-photo-93725859-1500x1000.jpg">
<div class="over">
<p class="title">aaa</p>
<p class="rayal">aaaaa</p>
</div>
</center>
</div>
</div>
</div>
CSS:
.container-images {
height: 300px;
width: 75%;
overflow: hidden;
display: flex;
/* align-items: center;*/
justify-content: center;
position: relative;
border-radius: 100px;
}
.image {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
background-size: cover;
border-radius: 100px;
display: block;
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
margin-bottom: 50px;
}
.over {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 2;
background: rgba(0, 0, 0, 0.2);
transition: all 0.3s ease-in-out;
border-radius: 100px;
}
.title {
margin-top: 100px;
color: white;
transition: all 0.5s ease-in-out;
font-family: RobotoSlab-Regular;
opacity: 0;
}
.rayal {
opacity: 0;
color: white;
transition: all 0.5s ease-in-out;
font-family: RobotoSlab-Regular;
}
.over:hover {
background: rgba(0, 0, 0, 0.5);
}
.over:hover .title {
margin-top: 0;
opacity: 1;
}
.over:hover .rayal {
opacity: 1;
}

Answer 1

This is a good example for flexbox.
Here's an updated example of your plunker:
https://jsfiddle.net/eqcyyae9/9/
A few notes on this:
I removed your <center> tags. These are depreciated, and it's not a good practice to use them (as described here). The same effect can be achieved using the Bootstrap center-block CSS class.
I removed the flexbox properties on your container-images class. The centering you were doing in that case is handled by center-block, and as a personal preference I only use Flexbox when necessary so my CSS degrades as gracefully as possible for older browsers.
I added a container-content class which does have flexbox on it. Using the space-between attribute with the flex-direction: column allows your content to take up the designated space (570px in this example). Your header will always stick to the top, and your image will stick to the bottom and any extra space will end up in-between (thus, space-between). There's a really good article on this here if you have more interest in looking into it.
As a side note, plunker asks that you add all file dependencies to the "External Resources" section rather then directly to the HTML. That's why you weren't seeing your Bootstrap styles come through.