flexbox нажмите здесь

идно из рисунка, последняя строка текста не выровнена с остальными (из других загрузочных карт). Логически этот факт зависит в основном от размера верхнего текста.

Как я могу гарантировать, что независимо от длины текста три основные части всегда выровнены? Учитывая также, что заголовок (первая строка текста) может быть в несколько строк (очень крайний случай).

Это код только для одной карты:

<div class='col-lg-4' style='cursor: pointer; padding-bottom: 15px;'>
    <div style='height: 377.59px;' class='card mb-3' style='border: 1px solid #33cdc6;'>
        <img style='height:185.59px; width: 100%;' class='card-img-top' src='#' alt='Card image cap'>
        <div class='card-body'>
            <h5 class='card-title' style='color: #293a44;'>TITOLO</h5>
            <p class='card-text'>Breve descrizione</p>
            <p class='card-text'>
                <span class='h5 text-muted'>Montepremi</span>";
                <small style='padding-left: 125px;' class='text-muted'>data</small>
            </p>
        </div>
    </div>
</div>