I have a row with three columns, each containing an image and a title.
Currently, on a large screen, the titles are displayed on a single line and everything looks fine.
However, when resizing the screen, the first title wraps onto two lines:
My goal is to make the other two titles stretch to match the height of the first title and be vertically centered:
Is there a way to achieve this using flexbox?
I have tried various solutions found when searching for "flexbox stretch/fill height", but none worked when I attempted to adapt them to my code. I attempted wrapping the content of each column in a div with display:flex and flex-direction:column, and placing the titles in a div with flex:1, but without success.
HTML CODE:
<section id="home_univers">
<div class="container">
<div class="row">
<div class="col-lg-4">
<img alt="Pet Animals" src="http:/placehold.it/450x210" alt="">
<div class="test"><h3 class="bg_rose">aaaaaaa aa aaaaaaaaa</h3></div>
</div>
<div class="col-lg-4">
<img alt="Horses" src="http:/placehold.it/450x210" alt="">
<div class="test"><h3 class="bg_vert">aaaaaaa</h3></div>
</div>
<div class="col-lg-4">
<img alt="Livestock" src="http:/placehold.it/450x210" alt="">
<div class="test"><h3 class="bg_blue">aaaaaaa aa aaaaa</h3></div>
</div>
</div>
</div>
</section>
CSS CODE:
.blue {
color: #0033a0;
}
.bg_blue {
background-color: #0033a0;
}
.rose {
color: #ff7a6d;
}
.bg_rose {
background-color: #ff7a6d;
}
.vert {
color: #8dad20;
}
.bg_vert {
background-color: #8dad20;
}
#home_univers {
padding-top: 85px;
padding-bottom: 85px;
}
#home_univers h3 {
text-transform: uppercase;
color: #fff;
font-size: 24px;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 0;
}
#home_univers img {
width: 100%;
}
JS Fiddle: https://jsfiddle.net/owvs550p/