Not able to distribute DIVs vertically

I'm trying to recreate 2:1 layout from the photo below but I'm unable to distribute the right 2 photos vertically so they align perfectly with the photo on the left. I tried to put it in a flex but then they distribute vertically and I need them to be responsive.

Current Layout

How it should look like

img-row {
    display: flex;
    flex-wrap: wrap;
}

.gridImage1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.right-photos-div {
    justify-content:space-around;
}

.gridImage23 {
    width:100%;
    height:100%;
    object-fit:cover;
    justify-content: space-around;
}

 <div class="container-fluid row img-row">
                
                    <div class="col-12 col-md-6">
                        <h5 class="grid-image1-title position-absolute"><b>GINA Smart | The new standard in filter coffee</b></h5>
                        <h5 class="grid-image1-price position-absolute">220€</h5>
                        <img src="Images/goat-story-gina-specialty-coffee-preparation-66_3_2x_cb3f02c4-e13e-4945-b38f-513e42091a4e.jpeg" class="gridImage1" alt="Gina">
                    </div>
                    <div class="col-12 col-md-6 right-photos-div">
                        <div class="col-12 d-inline-block">
                            <h5 class="grid-image2-title position-absolute"><b>COLD BREW KIT | Cold brew made easy</b></h5>
                            <h5 class="grid-image2-price position-absolute">22€</h5>
                            <img src="Images/20190902-A7R01337_2x_120dba37-6706-456a-89f5-fdfe1c56edef.jpeg" alt="" class="gridImage23">
                        </div>
                        <div class="col-12 d-inline-block">
                            <h5 class="grid-image2-title position-absolute"><b>GOAT MUG | Unique coffee cup on the go</b></h5>
                            <h5 class="grid-image2-price position-absolute">29,5€</h5>
                            <img src="Images/goat_mug_hemp_3_2x_dd7d99a2-21cd-4730-a623-786b47beab02.jpeg" alt="" class="gridImage23">
                        </div>
                    

                </div>

            </div>

Solution

I managed to achieve what you're looking for with the following code:

    .grid-test{
        display:grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 50vh;
    }

    img{
        width: 100%;
        object-fit: cover;
    }

    .left-side-image{
        height: 100%;
    }

    .right-grid-container{
        gap: 30px;
        display: flex;
        flex-wrap: wrap;
        padding-left: 30px;
    }

<div class="grid-test">
    <div>
        <img class="left-side-image" src="https://www.w3schools.com/css/img_lights.jpg">
    </div>
    <div class="right-grid-container">
        <img class="right" src="https://www.w3schools.com/css/img_lights.jpg">
        <img class="right" src="https://www.w3schools.com/css/img_lights.jpg">
    </div>
</div>

By the logic I've changed, you should be able to do that by simply adding the following styles to your right-photos-div element:

    gap: 30px;
    display: flex;
    flex-wrap: wrap;
    padding-left: 30px;

Noting that you're transforming that element itself into a display flex element with flex-wrap so that you can add gap between items and adding a padding-left equivalent to that same gap (if you want to have equal spaces between your elements).