JSFiddle - React, Tailwind, and code Playground
HTML
<div id="Blog1">
<div class="post">
<img src="http://dummyimage.com/180x120/000/fff" alt="Image 1" title="This is my first image"/>
<div class="post-info">
<span>post title post title post title</span>
</div>
</div>
<div class="post">
<img src="http://dummyimage.com/175x104/f0f/fff" alt="Image 2" title="The second one is pretty"/>
<div class="post-info">
<span>post title post title post title</span>
</div>
</div>
<div class="post">
<img src="http://dummyimage.com/150x100/a3d/fff" alt="Image 3" title="Third image"/>
<div class="post-info">
<span>post title post title post title</span>
</div>
</div>
<div class="post">
<img src="http://dummyimage.com/278x125/cf5/fff" alt="Image 4" title="Fourth image"/>
<div class="post-info">
<span>post title post title post title</span>
</div>
</div>
<div class="post">
<img src="http://dummyimage.com/199x120/e46/fff" alt="Image alt attr." title="Some image title"/>
<div class="post-info">
<span>post title post title post title</span>
</div>
</div>
<div class="post">
<img src="http://dummyimage.com/207x480/361/fff" alt="Image alt attr." title="Some image title"/>
<div class="post-info">
<span>post title post title post title</span>
</div>
</div>
<div class="post">
<img src="http://dummyimage.com/400x107/081/fff" alt="Image alt attr." title="Some image title"/>
<div class="post-info">
<span>post title post title post title</span>
</div>
</div>
<div class="post">
<img src="http://dummyimage.com/50x40/cc3/fff" alt="Image alt attr." title="Some image title"/>
<div class="post-info">
<span>post title post title post title</span>
</div>
</div>
...
CSS
#Blog1{
padding:10px;
}
#Blog1 .post{
border:1px solid #000000;
margin:3px;
text-align:center;
position: relative;
display: inline-block;
*display: inline;
zoom: 1
}
.post img{
height:100px;
}
.post .post-info{
text-align:left;
}
.post .post-info span{
word-wrap:break-word;
}