trying to put two stacked images to align right to a lone image in css - html

Question

i'm trying to two pictures that are stacked upon each other to lay beside a full picture like the image below - i'm trying to get those two images that are stacked on each other to align next to the other lone image.
can anyone help me with this. i don't know if its flexbox or i should use positioning to solve the problem because the image is stuck below and i'm trying to make the images go up and also make them align right next to the lone image (p.s i have tried positioning but does not work for some reason)
.lone-image {
display: flex;
}
.images {
background-size: cover;
background-image: url(xii.jpg);
width: 45%;
height: 520px;
position: relative;
left: 50px;
}
.Xiaomi h1 {
position: absolute;
color: white;
font-weight: normal;
font-size: 40px;
bottom: 70%;
right: 60%;
}
.xiaomi-text {
color: white;
position: absolute;
top: 25%;
left: 6%;
font-size: 12px;
}
.Buy-now button {
background-color: #706c6c;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
position: absolute;
bottom: 60%;
right: 76%;
}
.images2 {
background-image: url(canon.jpg);
background-size: cover;
width: 37%;
height: 280px;
position: relative;
margin-bottom: 10px;
}
.Canon h1 {
font-weight: normal;
font-size: 40px;
position: absolute;
top: 40px;
left: 15px;
}
.button2 button {
color: white;
background-color: #706c6c;
padding: 6px 12px;
border: none;
position: absolute;
font-size: 16px;
top: 150px;
left: 15px;
}
.images3 {
background-image: url(dell.jpg);
background-size: cover;
width: 37%;
height: 280px;
flex-wrap: wrap;
}
.stacked-image {
display: flex;
flex-flow: column;
align-items: flex-end;
}
<div class="lone-image">
<div class="images">
<div class="Xiaomi">
<h1> Xiaomi X15</h1>
</div>
<div class="Buy-now">
<button> BUY NOW</button>
</div>
<div class="xiaomi-text">
<p> Discover your passion in the phone of dreams so order now</p>
</div>
</div>
</div>
<div class="stacked-image">
<div class="images2">
<div class="Canon">
<h1>CANON MP56 </h1>
</div>
<div class="button2">
<button> BUY NOW</button>
</div>
</div>
<div class="images3">
<div class="Dell">
<h1>Dell X5-MWS</h1>
</div>
<div class="button3">
<button> BUY NOW</button>
</div>
</div>
</div>

Answer 1

If I'm understanding you correctly, you are looking for flexbox. Here is a basic example:
JSFiddle
<div class="parent">
<img src="" alt="left"/>
<div class="child">
<img src="" alt="hi"/>
<img src="" alt="hi"/>
</div>
</div>
.parent {
display: flex;
}
.child {
display: flex;
flex-direction: column;
}
If you want the change how they vertically align, you can just play around with the align-items CSS property on the parent class.