How do i align boxes like this - html

Question

I am trying to align 3 boxes and 2 images.
2 boxes vertically with there is an img between
3rd box standing right of them with an arrow img pointing it like this:
Example box css:
.box{
width: 80px;
height: 80px;
background: #8C8C8C;
margin:0 auto;
border: solid 3px #8B0000;
}

Answer 1

Use flexbox and divide to 3 section(3 divs) inside the wrap div
.wrap{
display:flex;
}
.box{
width: 80px;
height: 80px;
background: #8C8C8C;
margin:0 auto;
border: solid 3px #8B0000;
}
.img1 img{
width: 80px;
height: 150px;
}
.part2 img{
width: 150px;
height: 80px;
}
.part2,.part3{
margin-top: 100px;
}
.part3 .box{
margin-left: 40px;
}
<div class="wrap">
<div class="part1">
<div class="box">
</div>
<div class="img1">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
</div>
<div class="box">
</div>
</div>
<div class="part2">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
</div>
<div class="part3">
<div class="box">
</div>
</div>
</div>

Answer 2

If you have constant number of elements. (3 boxes and 2 images with fixed width and height), you can create wrapper box with relative position, then add position absolute to child nodes and write needed positions. for example:
.wrapper {
width: 100%;
box-sizing: border-box;
position: relative;
}
.child-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Answer 3

You can use flexbox to position your boxes by rows and columns.
#cont1 {
display:flex;
flex-direction:row;
}
.box{
width: 80px;
height: 80px;
background: #8C8C8C;
border: solid 3px #8B0000;
}
<div>
<div class="box">Box 2
</div>
<div id="cont1">
<div> IMG1 </div>
<div> IMG2 </div>
<div class="box">Box 3</div>
</div>
<div class="box">
Box 1
</div>
</div>

Answer 4

You should try to use the float/clear attribute:
.box1{
float: left;
}
.box2{
float: right;
}
.image{
float: left;
}
.box3{
float: left;
}
Afterwards just use position: relative within your classes fix the positioning.