Как выровнять содержимое карточки товара?

Question

[Steve Road]

Решил создать карточку товара и при уменьшении экрана увидел, что цены находятся на разном уровне.
Пытался использовать align-self и justify, но ничего не получается. Как это можно сделать?

<div class="season-page">
            <div class="season-block">
                <img class="season-block_photo" src="../img/season/window_deflectors.jpg" alt="Дефлекторы_окон_(ветровики)">
                <div class="season-block_title">Дефлекторы окон (ветровики)</div>
                <div class="season-block_price">800-900 &#8381;</div>
            </div>
            <div class="season-block">
                <img class="season-block_photo" src="../img/season/hood_deflectors.jpg" alt="Дефлекторы_капота">
                <div class="season-block_title">Дефлекторы капота</div>
                <div class="season-block_price">800-1450 &#8381;</div>
            </div>
</div>

SASS:

.season
    padding-top: 50px
    &-page
        display: flex
        flex-wrap: wrap
        justify-content: space-around
        text-align: center
    &-block
        display: flex
        flex-direction: column
        flex-basis: 300px
        max-width: 300px
        background-color: #f5f5f5
        border-radius: 30px
        margin-bottom: 30px
        &_title
            color: #000
            font-family: "Blogger Sans-Bold"
            font-size: 30px
            margin: 0
            padding-bottom: 15px
        &_photo
            max-width: 300px
            max-height: 240px
            border-top-right-radius: 30px
            border-top-left-radius: 30px
        &_price
            color: #ff0000
            font-family: "Blogger Sans-Bold"
            font-size: 30px
            margin: 0

Comments

[Pavstyuk]

Так у вас в первом случае есть дополнительная строчка "(ветровики)" поэтому цена сдвигается ниже ровно на высоту строки.

[Steve Road]

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

Answer 1

[DaBags]

Если правильно Вас понял, то для цены укажите
1 вариант:
margin-top: auto;

2 вариант:
display: flex;
flex-grow: 1;
justify-content: center;
align-items: flex-end;

3 вариант (для заголовка укажите):
flex-grow: 1;

Comments

[Steve Road]

1 вариант помог, сейчас проверю остальные, возьму на заметку.
Спасибо тебе большое, добрый человек! :)

[Steve Road]

Для заголовка если задать margin: auto,тоже получается.

[DaBags]

Steve Road, только это спозиционирует заголовок по центру (особенно если заголовок будет короткий), лучше задать margin-bottom: auto