starting div s on the same top position - html

Question

I have 3 div s inside a another div, I want two of them starts at the same top position and the other one be in center of the other. this is the code
<div class="col-lg-8 col-md-8 col-xs-12 ">
<div class="col-1 div-container-product-images showbordergreen ">
<div class="div-product-images-list">
#foreach(var item in Model.Images)
{
<div class="mt-2 d-block"><img src="~/#item" width="70" height="70" /></div>
}
</div>
</div>
<div class="col-6 text-center d-inline-flex showborderred">
<img src="~/#Model.Images.FirstOrDefault()" width="200" height="300" style="padding: 10px;" />
</div>
<div class="col-4 d-inline-flex showborderblue">
Title
</div>
</div>
and this is css
.div-container-product-images {
display: inline-flex;
vertical-align: middle;
}
.div-product-images-list{
margin: auto;
}
.showborderred {
border: 2px solid red;
}
.showborderblue {
border: 2px solid blue;
}
.showbordergreen {
border: 2px solid green;
}
but it become like this:
I want the blue box and red box starts at same top position and the green box in middle height of red box
how can I do that?

Answer 1

Enable flex on your parent container. Then add align-items-start class to it and align-self-center to the green box.

Answer 2

I hope below code helps you.
I have wrapped columns in one row and added class .align-items-start for align column to top. and added .align-self-center class on last column which you want to align center.
.div-container-product-images {
display: inline-flex;
vertical-align: middle;
}
.div-product-images-list{
margin: auto;
}
.showborderred {
border: 2px solid red;
}
.showborderblue {
border: 2px solid blue;
}
.showbordergreen {
border: 2px solid green;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-start">
<div class="col-4 ">
<div class="div-container-product-images w-100 showbordergreen ">
<div class="div-product-images-list ">
<img src="~/#Model.Images.FirstOrDefault()" width="200" height="300" />
</div>
</div>
</div>
<div class="col-4 text-center d-inline-flex showborderred">
<img src="~/#Model.Images.FirstOrDefault()" width="200" height="300" />
</div>
<div class="col-4 align-self-center">
<div class="showborderblue">
Title
</div>
</div>
</div>