JSFiddle - React, Tailwind, and code Playground
HTML
<div class="flex-container">
<div class="flex-item">
<div class="baseline w-full border-b">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
</div>
<div>more text</div>
</div>
<div class="flex-item">
<div class="baseline w-full border-b">
<div class="flex-title">flex title1 longer title</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
</div>
<div>more text</div>
<div>more text</div>
<div class="w-full">
<div class="flex-img">
<img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
</div>
</div>
</div>
<div class="flex-item">
<div class="baseline w-full border-b">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
</div>
<div>more text more text more text</div>
</div>
<div class="flex-item">
<div class="baseline w-full border-b">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
</div>
<div>more text</div>
</div>
<div class="flex-item">
<div class="baseline w-full border-b">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
</div>
center here
</div>
<div>more text1</div>
</div>
</div>
CSS
.flex-container {
display: flex;
align-items: baseline;
width: 400px;
background-color: lightgrey;
flex-wrap: wrap;
}
.flex-item {
width: 100px;
margin: 10px;
background-color: cornflowerblue;
}
.w-full { width: 100% }
.baseline {
display: inline-block;
text-align: center;
}
.border-b {
border-bottom: 1px solid #fff;
}
.flex-img {
justify-content: center;
align-items: center;
text-align: center;
}