Flexbox / Bootstrap 4 - Stretch element to remaining height of parent

Question

I have a row, containing three columns. Each column contains an img, and a title.

Here is what it looks like at the moment :

On large screen, the titles are displayed on a single line, and everything looks fine.

But when resizing, the first title is now on two lines :

What I'm trying to do is have the two others titles to stretch, so they will have the same height as the first title, and also beeing verticaly centered, like this :

Is there a way to achieve this using flexbox ?

I tried various solutions I found when searching for "flexbox stretch / fill height" but none worked when I tried to adapt them to my code. ( I tried wrapping the content of each column in a div, having display:flex and flex-direction:column, and having 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="Animaux de compagnie" src="http:/placehold.it/450x210" alt="">
                        <div class="test"><h3 class="bg_rose">aaaaaaa aa aaaaaaaaa</h3></div>
                    </div>
                    <!-- /.col-lg-4 -->
                    <div class="col-lg-4">
                        <img alt="Chevaux" src="http:/placehold.it/450x210" alt="">
                        <div class="test"><h3 class="bg_vert">aaaaaaa</h3></div>
                    </div>
                    <!-- /.col-lg-4 -->
                    <div class="col-lg-4">
                        <img alt="Animaux de rente" src="http:/placehold.it/450x210" alt="">
                        <div class="test"><h3 class="bg_blue">aaaaaaa aa aaaaa</h3></div>
                    </div>
                    <!-- /.col-lg-4 -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container -->
        </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/

Answer 1

HTML

<section id="home_univers">
    <div class="container">
        <div class="row">
            <div class="col-4">
                    <img alt="Animaux de compagnie" src="http:/placehold.it/450x210" alt="">

            </div>
            <!-- /.col-lg-4 -->
            <div class="col-4">
                    <img alt="Chevaux" src="http:/placehold.it/450x210" alt="">

            </div>
            <!-- /.col-lg-4 -->
            <div class="col-4">
                    <img alt="Animaux de rente" src="http:/placehold.it/450x210" alt="">

            </div>
            <!-- /.col-lg-4 -->
        </div>
        <div class="row">
            <div class="col-4 color">


                    <div class="test  bg_rose"><h3 class="">aaaaaaa aa aaaaaaaaa</h3></div>
            </div>
            <!-- /.col-lg-4 -->
            <div class="col-4 color">

                <div class="test bg_vert"><h3 class="">aaaaaaa</h3></div>
            </div>
            <!-- /.col-lg-4 -->
            <div class="col-4 color">

                    <div class="test bg_blue"><h3 class="">aaaaaaa aa aaaaa</h3></div>
            </div>
            <!-- /.col-lg-4 -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>

CSS

@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');

.orange {
    color: #ffba00;
}

.bg_orange {
    background-color: #ffba00;
}

.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%;
}
.col-4.color {
  display: flex;
}
.test {
      flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}