Как выровнять элемент по основанию div с помощью flexbox, если для flex-direction установлено значение column

Question

Я знаю, что этот вопрос задавался несколько раз, но по какой-то причине мой не работает.Не могли бы вы, ребята, помочь мне? Я просто пытаюсь совместить все кнопки со всеми картами, потому что плитки могут иметь разную длину в одну, две или три строки, но я не знаю, почему это не работает.Спасибо!

    .cards {
        max-width: 1200px;
        display: flex;
    }

    .card {
        flex: 1;
        margin-right: 30px;
    }

    .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .pic {
        min-height: 20vh;
        background: blue;

    }

    <div class="cards">
        <div class="card red">
            <div class="pic">
            </div>
            <div class="content">
                <h1>Lorem ipsum dolor sit ait.Lorem ipsum dolor sit ait </h1>
                <button>click here</button>
            </div>
        </div>
        <div class="card blue">
            <div class="pic">

            </div>
            <div class="content">
                <h1>Lorem ipsum dolor sit ait. </h1>
                <button>click here</button>
            </div>
        </div>
    </div>

Вот как я хочу выглядеть.

Answer 1

Для использования свойства justify-content: space-between; должно быть определено height или width.

Для flex-direction:column должно быть определено height

  .cards {
        max-width: 1200px;
        display: flex;
    }

    .card {
        flex: 1;
        margin-right: 30px;
    }

    .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      height:200px;
      
    }

    .pic {
        min-height: 20vh;
        background: blue;

    }

    <div class="cards">
        <div class="card red">
            <div class="pic">
            </div>
            <div class="content">
                <h1>Lorem ipsum dolor sit ait.Lorem ipsum dolor sit ait </h1>
                <button>click here</button>
            </div>
        </div>
        <div class="card blue">
            <div class="pic">

            </div>
            <div class="content">
                <h1>Lorem ipsum dolor sit ait. </h1>
                <button>click here</button>
            </div>
        </div>
    </div>