Как это сверстать без применения табличной вёрстки?

Question

[When you dont want to litter on stackoverflow]

Как сделать так, чтобы всё, после название блюда, отображалось на одном уровне, без применения табличной вёрстки?

Чтобы было по структуре было вот так:

Answer 1

[profesor08]

Контейнеру задать display: flex; flex-direction: column;
Для текста задать margin-top: auto;
В результате между названием и текстом будет пустое пространство.

Comments

[When you dont want to litter on stackoverflow]

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

[Rustam Bainazarov]

Andriy Kosmenyuk, насколько старых? Старшее IE11?
https://caniuse.com/#search=Flex

Браузеры уже лет по 6–7 (!) поддерживают flex. Даже iPhone 3GS, LOL, имеет какую-то поддержку flex (на iOS 6). Тем паче у вас клиентский сайт судя по всему, а не для государственных структур, где используют ПК с Pentium 4.

Ну а так, вам поможет фиксированная высота в em (по количеству строк). Будет работать даже в IE9, но зачем?

[When you dont want to litter on stackoverflow]

Рустам Байназаров, Спасибо за совет

Answer 2

[y0u]

• Добавить фиксированную высоту заголовку
  
• Если есть jQuery на проекте - использовать плагин jquery.matchHeight.js
  

Comments

[When you dont want to litter on stackoverflow]

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

[y0u]

Andriy Kosmenyuk, что значит "фокусироваться на всей страничке"?

[When you dont want to litter on stackoverflow]

y0u, Я просто думал что ты о display:fixed)

[y0u]

Andriy Kosmenyuk, нет, я имел ввиду задать height заголовку

[When you dont want to litter on stackoverflow]

y0u, Неправильно прочитал, а так то ещё раз спасибо, плагин помог!

Answer 3

[Виталий Кузнецов]

сделайте вёрстку таблицей на css.

на мобиле адаптив линейных, на 786 + уже таблица...

Answer 4

[Whois]

Я думаю это можно и удобно верстать на флекс-боксах

Comments

[origami1024]

Нужно чтобы высота внутренних блоков менялась в зависимости от высоты внутренних блоков соседних карточек. Думаю использование флекс-боксов не будет основным трюком чтобы этого достичь