Как ГРАМОТНО адаптировать контент внутри 2х колонок по 50% (col-6 col-6) не используя GRID?

Question

[Роман Говоров]

Всем привет!
Много верстаю и часто встречается вот такой шаблонный блок, картинка слева и текст с заголовком справа:



На экране до 1200px часто бывает так, что заголовок хочется сделать по центру, а нижнюю часть сделать align-items-center:



Какие варианты есть, для подобной реализации?

Я делаю следующим образом, костыльным, и мне не очень нравится данное решение..

h2 {
  transform: translateX(-25%);
}
.column-1 {
  transform: translateY(-7%);
  align-self: end;
}

Или так:

.container {
	position: relative;
	padding-top: 95px;
}
h2 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: inline-table;
}

Answer 1

[Антон Антон]

Гридами можно хорошо сделать: https://play.tailwindcss.com/ZUMURCMEVs

Comments

[Роман Говоров]

Гридами да, поправлю вопрос)
Но пока начальство говорит гриды не используем..

[Антон Антон]

Роман Говоров, а почему? вот уже пять лет как все поддерживают (кроме, разве что IE, но там "частичная поддержка") https://caniuse.com/?search=grid

[Роман Говоров]

Антон Антон, У нас продукт такой, электронные подписи и тд, в общем прихоть начальства, я как исполнитель ищу другие варианты...

[Антон Антон]

Роман Говоров, ну если на ie, то проще js ом на ресайз блоки местами поменять (ну и классы чуток) )

[Алекс Глебов]

Роман Говоров, сделайте прогрессивное улучшение. Для старых браузеров заголовок всегда сверху, на всю ширину, и 2 колонки на флексах. А для новых на гридах. Старые браузеры не поймут грид и оставят сетку на флексах. Это не критичный функционал, для старых браузеров можно отойти от макета.

Answer 2

[wadowad]

Как вариант: сначала обернуть контент, затем блок с контентом и заголовком обернуть в ещё один враппер. С первой ситуацией всё просто: у рисунка проставляем ширину и float: right, у враппера display: flow-root. Для второй ситуации: включаем флекс с переносами для основного контейнера; у враппера делаем display: contents, чтобы он вообще не учитывался; у заголовка меняем позицию order: -1 и ширину в 100%. Из минусов метода: как минимум одна лишняя обёртка.