JSFiddle - React, Tailwind, and code Playground

by sunil puvvada

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="clearfiximage 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 */

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

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

.clearfiximage:after {
    clear: both;
}