Not able to distribute DIVs vertically - html

Question

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>

Answer 1

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).