автоматически регулировать ВЫСОТУ элементов в гибком контейнере

Вот мой код:

      <div class="flex justify-center text-center">
<figure>
<figcaption id=image1><div>blablabla</div></figcaption>
 <img src="here"/>
</figure>
<figure>
<figcaption id=image2><div>blablabla</div></figcaption>
 <img src="here"/>
</figure>
</div>
/* MORE OF THE SAME */

с:

          figure {
        display: block;
        max-width: 50%;
        margin: 0.1rem;
        float:right;
    img {
        max-height: 75vh;
        display: flex;
        width:auto;
        max-width:100%
    }
    }  
    figcaption {
        text-align: center;
        text-indent: 0;
    }

Как мне настроить все эти элементы на минимальную высоту, когда все попытаются вырасти до 50%?

На данный момент у меня есть это: https://drive.google.com/file/d/1_A4XagDZXc130p0tPz_Laox6QwEjQUgr/view?usp=sharingНо мне бы хотелось это:https://drive.google.com/file/d/1Bp9g3ZUDRzXQkTKi2kHWXOg1X-fgncIz/view?usp=sharing Конечно , все по-прежнему занимают полную строку

Спасибо за помощь, не могу разобраться.