Сверстаем ещё одну карточку:

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

Однако карточка немного асимметрична: заголовок шире, чем список опций и первая колонка.

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

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px;
  gap: 10px;
}

Потом c помощью свойства width зададим заголовку ширину больше, чем ширина колонки.