JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<p><span class="columnh2">Title of a text</span><br />
    A few lines of text<img src="http://lorempixel.com/80/80" border="0" width="81" height="80" /></p>
<p><span class="columnh2">Title of 2nd text</span><br />
More text with a different subject<img src="http://lorempixel.com/80/80" border="0" width="81" height="80" /></p>
<p><span class="columnh2">Title of 3th text</span><br />
And more text with yet another subject<img src="http://lorempixel.com/80/80" border="0" width="81" height="80" /></p>
</div>

CSS

#container { 
width: 100%;
margin: 0 auto;
}

div#container p {
text-align: left; 
float: left; 
width: 25.3%;
margin: 2%;
padding: 0px 2% 10px 2%;
height: 500px;
background-color: yellow;
}

.columnh2 {
line-height: 200%;
font-weight: bold;
}

img {
    display: block;
    margin: 32px auto;
}