Как сделать так чтобы элементы были на 1 уровне по вертикали?

Question

[Steve Road]

Создал карточки с товарами, на примере какого то сайта, и я столкнулся с проблемой, что по вертикали элементы находятся на разных уровнях.
Подскажите пожалуйста каким способом можно их выровнять, может у меня сама разметка для карточки неправильная.

<div class="chocolate-page">
                <div class="chocolate-page_block">
                    <img src="img/chocolate_1.webp" alt="chocolate_1">
                    <p class="chocolate-page_block_desc">Горький шоколад с кедровым орехом, 65 г</p>
                    <p class="chocolate-page_block_price">290</p>
                    <a class="chocolate-page_block_btn1 btn" href="">Подробнее</a>
                    <a class="chocolate-page_block_btn2 btn" href="">Купить</a>
                </div>

                <div class="chocolate-page_block">
                    <img src="img/chocolate_2.webp" alt="chocolate_2">
                    <p class="chocolate-page_block_desc">Белый шоколад на кешью с манго, 65 г</p>
                    <p class="chocolate-page_block_price">290</p>
                    <a class="chocolate-page_block_btn1 btn" href="">Подробнее</a>
                    <a class="chocolate-page_block_btn2 btn" href="">Купить</a>
                </div>
                
                <div class="chocolate-page_block">
                    <img src="img/chocolate_3.webp" alt="chocolate_3">
                    <p class="chocolate-page_block_desc">Горький шоколад с малиной и спирулиной, 65 г</p>
                    <p class="chocolate-page_block_price">290</p>
                    <a class="chocolate-page_block_btn1 btn" href="">Подробнее</a>
                    <a class="chocolate-page_block_btn2 btn" href="">Купить</a>
                </div>
            </div>

.chocolate
    padding-top: 100px
    padding-bottom: 150px
    &-page
        padding-top: 100px
        display: flex
        flex-wrap: wrap
        justify-content: space-between
        padding-bottom: 50px
        &_block
            padding-bottom: 10px
            flex-basis: 300px
            text-align: center
            &_btn1
                background-color: #f1f1f1
                color: #000
            &_btn2
                background-color: #000
                color: #fff

Comments

[Ankhena]

Использовать flex-direction column для карточек. Кнопки обернуть в div и задать ему margin-top auto.
А еще если заменить div'ы на список, то будет семантичнее.

[alex4answ]

Ankhena, а не проще min-height для названия задать ?

[Ankhena]

alex4answ, и как узнать сколько его задать? Не беря в расчет js.
И явные минусы этого варианта:
1. получим ненужные дыры, там где все заголовки будут короткими,
2. все равно получим кривые карточки, там где текста больше чем выдуманная min-height.

[Steve Road]

Ankhena, Спасибо. Данное решение помогло, я кстати думал про него, но почему то оно помогло только когда прочитал тут :D
Сейчас прыгает цена, содержимое карточки списком не делал.

[Ankhena]

Steve Road, если цена должна быть прибита к кнопкам, то отступ нужно задавать цене.
Ещё есть flex-shrink и flex-grow.

[Steve Road]

Ankhena, Просто хотелось бы, чтобы не зависимо от кол-ва символов, название было на уровне с названием, цена
с ценой и кнопки с кнопками из других карточек, то есть если текста в 1 карточке больше чем в другой, то та карточка где мало текста делала отступ который будет равен карточке где много символов текста, и таким образом, чтобы это не выглядело так...

[Ankhena]

Steve Road, повторю: если цена должна быть прибита к кнопкам, то отступ нужно задавать цене.

[Steve Road]

Ankhena, Всё разобрался, что вы имели ввиду я задавал отступ пикселями, но нужно было margin-top: auto прописать вместо кнопок. Спасибо вам ещё раз.
Буду дальше практиковаться и экспериментировать.