Trudności w pozycjonowaniu kafelków po prawej stronie ze zdjęciami

pytanie zadane 20 września 2023 w HTML i CSS przez Piotrek2713 Mądrala (5,500 p.)

Posiadam podstronę HTML

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La palabra - Blog o językach obcych</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="extra-classes.css">
</head>
<body>
    <header class="header-container">
        <section class="header-content header-content__left-side">
            <article class="img-collage-container">
                <div class="img-collage img-collage__left-side">
                    <img src="img/books.jpg" class="img-fluid margin-left--5px" alt="" srcset="">
                </div>
                <div class="img-collage img-collage__rigth-side">
                    <img src="img/love" class="img-fluid" alt="" srcset="">
                    <img src="img/to-learn.jpg" class="img-fluid margin-top-5px" alt="" srcset="">
                </div>  
            </article>
        </section>
        <section class="header-content header-content__right-side">
            <div class="greeting">
                <h1 class="greeting-header">Witaj na blogu</h1>
                <h2 class="greeting-header">La Palabra</h2>
                <p class="greeting-paragraph margin-top-5px">Znajdziesz tutaj wszystko na temat nauki języków obcych</p>
            </div>
            <div class="date-container">
                <span class="day-of-week margin-top-5px">Środa</span>
                <span class="calendar-date margin-top-5px">20 Września 2023 rok</span>
            </div>
        </section>
    </header>
    <script src="main.js"></script>
</body>
</html>

i CSS

.img-collage-container
{
    display: flex;
}
.img-collage
{
    display: flex;
    flex-direction: column;
}
.greeting-header
{
    font-size: 3rem;
    letter-spacing: 3px;
    background-color: #daa520;
}
.greeting-paragraph
{
    background: #c99410;
    font-size: 1.5rem;
}
.date-container
{
    display: flex;
    flex-direction: column;
}
.day-of-week, .calendar-date
{
    background: greenyellow;
    font-size: 2.45rem;

}

.img-fluid
{
    width: 100%;
}
.margin-top-5px
{
    margin-top: 5px;
}
.margin-left--5px
{
    margin-left: -5px;
}

całość wygląda tak

Od pewnego czasu walczę z tym aby elementy po prawej stronie miały podobne rozmiary. Próbowałem z display: flex, ale jedyne co osiągnąłem to, że elementy przykleiły się do górnej krawędzi albo jest to co widać na zrzucie ekranu. Nadawanie procentowej wysokości do elementów z tekstem również skutkuje niepowodzeniem