Мы расположили элементы по сетке. Но для соответствия макету ещё следует поправить выравнивание.

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

В прошлой части для выравнивания элементов по вертикали мы использовали свойство align-items. Оно управляет выравниванием всех элементов в контейнере. Но в нашем случае это свойство не подойдёт, так как у разных элементов должно быть разное выравнивание.

Поэтому используем свойство align-self, оно задаёт выравнивание по вертикали одному элементу. Мы уже встречались с ним, когда работали с флексами. Свойство align-self принимает те же значения, что и align-items: stretch (значение по умолчанию), start, end и center.

.element {
  align-self: start;
}

Используем align-self, чтобы прижать блок с ценой к верхней границе, а дисклеймер — к нижней. После этого добавим на страницу ещё одну карточку и посмотрим, что будет с вёрсткой, если у компонента окажется другое содержимое.

Чтобы увидеть обе карточки одновременно, используйте кнопку уменьшения масштаба. Она находится справа от мини-браузера.