JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clearfix float-my-children">
   <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" width=100>
   <div>some text here</div>
</div>

<div class="clearfix float-my-children">
   <img src="//upload.wikimedia.org/wikipedia/commons/f/fa/Honor%C3%A9_de_Balzac_(Stories_By_Foreign_Authors).png" width=100>
   <div>some text here</div>
</div>
    
<p>A paragraph here</p>

CSS

/* tell the container's children to float left: */
.float-my-children > * {
    float:left;
    margin-right:5px;
}

/* this is called a clearfix. it makes sure that the container's children floats are cleared, without using extra markup */

.clearfix {
    *zoom:1 /* for IE */
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* end clearfix*/

/* below is just to make things easier to see, not required */
body > div {
    border:1px dashed red;
    margin-bottom:10px;    
}