Как выровнять заголовок в списке?

Question

[Петр Питерский]

.details > div {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 2rem;
}

<div class="details">
				<div>
					<header>Дата</header>
					<div>Май</div>
				</div>
				<div>
					<header>Организация</header>
					<div>Детский мир</div>
				</div>
				<div>
					<header>Адрес</header>
					<div>Москва</div>
				</div>
</div>

Подскажите как сделать чтобы header был шириной максимальный (то есть брал размер от Организация) то есть везде одинаковый ширины, без использования фиксированной ширины для header.

Результат хотелось бы как на картинке:

Comments

[Ankhena]

Убрать обертки вокруг пар заголовок + текст, если не решите использовать семантику.
А то у вас какой-то компот, header внутри div.
Хорошо бы поменять на dl. Ну или на table.

Опять же, если без оберток, то всё само и расставится, если с обертками, то subgrid либо js, если не устраивает поддержка сабгрида..

[leeroyjenkins176]

Для данного примера можно display: table/table-row/table-cell использовать как замену subgrid

[DIVSIDE]

<header>Дата</header>
Что это?*

Answer 1

[imko]

subgrid или обычный грид но для дивов display: contents

Comments

[Петр Питерский]

сделал для DIV display: contents; конечно сетка сломалась и просто обычный перенос строк

[imko]

Петр Питерский, ну так надо полностью читать, .details сделать гридом

[Петр Питерский]

а как разница вложенынй у меня грид или родитель?

[imko]

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

[Петр Питерский]

Что-то ничего непонятно, я же приложил, у меня Header разной ширины мне надо чтобы header стал одинаковый для всех строк, при этом был максимальной ширины, без задания жесткого width

[imko]

Петр Питерский, я понимаю, именно для такой задачи решение я и назвал

[Петр Питерский]

imko, Можете код привести рабочий? всё что вы сказали я попробовал не работает.

[imko]

Петр Питерский,

.details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 2rem;
}

.details > div {
	display: contents;
}

[Петр Питерский]

Спасибо, сработало!