Содержимое ячейки сетки заполняет ячейку без потери компоновки потока. ⇐ CSS

[Anonymous]

У меня есть этот код для сетки:

Код: Выделить всё

  .cards {
display: grid;
grid-template-columns: repeat(2, 15em);
padding: 0.5em;
gap: 0.5em;
}

.cards>div {
border: 1px solid blue;
}

h2 {
margin: 0;
border-bottom: 1px solid green;
}

.logo {
float: right;
border: 1px solid red;
}

p {
margin: 0;
background-color: yellow;
}

Код: Выделить всё

LOGO
LOGOTitle
Some content made from some words


Title
Some content
Some more
Even more

Отредактировано: вместо div class=logo
Когда вы попробуете это, вы увидите:

• ЛОГОТИП расширяется в элемент p и смещает его содержимое. Это хорошо, я хочу, чтобы
• элемент p второй карточки был выше и определял высоту строки сетки. Это хорошо, я хочу, чтобы
• элемент p первой карточки не доходил до низа карточки. Это нормально, но я хочу это изменить.

Как сделать так, чтобы меньшая буква «заполнила» пространство под заголовком? Flexbox не подходит, поскольку гибкие элементы создают контексты форматирования блоков, вызывая увеличение высоты h2. Я этого не хочу!
Для этого я мог бы использовать JavaScript. Но вам не следует использовать JavaScript, если подойдет чистый CSS. Но так ли это? Я не нахожу решения.

Подробнее здесь: https://stackoverflow.com/questions/781 ... low-layout