I want to create a layout in css that looks like the following.

Red is a title (text). (the heading)
Green is an image. (content.field_afbeelding)
Yellow is the content text. (content.field_body
Blue is a representation of the date. (scouts-floating)

The most comes from twig an I have little control over that.
This is what i currently have tried but the full grid (red, green and yellow) always shows left of the blue block instead of flowing around the blue block.

<div class="scouts-teaser-content">
    {% include 'radix:heading' with {
        heading_attributes: title_attributes,
        heading_html_tag: 'h2',
        content: label,
    } %}

    {{ content.field_afbeelding }}

    {{ content.field_body }}

    <div class="scouts-floating">
        <div class="scouts-calendar-block scouts-calendar-block-big">
            <div class="scouts-calendar-header">
                {{ month }}
            </div>
            <div class="scouts-calendar-body">
                {{ day }}
            </div>
        </div>
    </div>

</div>


.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;
}