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

[Anonymous]

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

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

body {
height: 100vh;
}

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

.flex-container {
display: flex;
grid-column: -1 / 1;
grid-row: -1 / 1;
position: relative;
}

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

.right {
flex-basis: 100%;
display: flex;
background: yellow;
flex-direction: column;
justify-content: flex-end;
}

.right__content {
padding-inline: 2rem;
}

.text-container {
padding-inline: 2rem;
background: white;
}

.break-out {
position: absolute;
left: 0;
right: 0;
}

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

Hello this is some text

This breaks out

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