Как соблюдать другие элементы при выходе из контейнера? ⇐ CSS

[Anonymous]

У меня есть макет, состоящий из двух столбцов, где правый столбец будет содержать текст и заголовок. Заголовок также должен иметь возможность либо оставаться в своем столбце, либо охватывать оба столбца, и для этого я использую укладку сетки. Однако я столкнулся с проблемой, когда содержимое правого столбца и заголовка не соблюдают границы друг друга, как в случае с Absolute. Сейчас я вычитаю высоту текстового контейнера из контейнера контента, но мне интересно, есть ли лучший подход для этого типа макета? Не обращайте внимания на магическую нумерацию, это просто для демонстрации идеи, я бы при необходимости использовал более динамичный подход.
Что у меня есть на данный момент:

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

body {
height: 100vh;
}

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
height: 100%;
outline: 2px solid blue;
}

.flex-parent {
display: flex;
grid-column: -1 / 1;
grid-row: -1 / 1;
}

.left {
flex-basis: 100%;
background: red;
}

.right {
flex-basis: 100%;
background: yellow;
box-sixing: border-box;
}

.right__inner {
display: flex;
height: calc(100% - 100px);
align-items: flex-end;
}

.text-container {
grid-column: -1 / 1;
grid-row: -1 / 1;
align-self: end;
opacity: 0.8;
background: white;
}

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

Hello this is some text




Heading

Подробнее здесь: https://stackoverflow.com/questions/798 ... -container