Плавающий текст, нарушающий сетку ⇐ CSS

[Anonymous]

Я хочу создать макет в CSS, который будет выглядеть как показано ниже.
Красный — заголовок (текст). (заголовок)
Зеленый — это изображение. (content.field_afbeelding)
Жёлтый цвет — текст содержимого. (content.field_body
Синий — это представление даты. (разведчики-плавающие)
Большая часть исходит от ветки, и я мало могу это контролировать.
Это это то, что я сейчас пробовал, но полная сетка (красная, зеленая и желтая) всегда отображается слева от синего блока, а не обтекает синий блок.

{% include 'radix:heading' with {
heading_attributes: title_attributes,
heading_html_tag: 'h2',
content: label,
} %}

{{ content.field_afbeelding }}

{{ content.field_body }}




{{ month }}

{{ day }}






.scouts-teaser-grid {

display: grid;
grid-template-rows: auto 1fr; // Creates two rows: one for the header and one for the content
grid-template-columns: 1fr 1fr; // Creates two columns: one for the image and one for the text
column-gap: .5em;

.scouts-teaser-title {
grid-column: 1 / -1; // Spans the header across both columns
}

.field--name-field-afbeelding {
grid-row: 2; // Places the image in the second row
grid-column: 1; // Places the image in the first column
}

.field--name-field-body {
grid-row: 2; // Places the text in the second row
grid-column: 2; // Places the text in the second column
}
}

.scouts-floating {
float: right;
margin-left: .8em;
margin-bottom: .8em;
}


Подробнее здесь: https://stackoverflow.com/questions/784 ... xt-in-grid