JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<div class="big_block">
    <img src="http://placehold.it/100x300" />
    <p><strong>Before fix. Image falls out of the container.</strong></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, libero et venenatis sollicitudin, libero nisl laoreet felis, a viverra turpis felis a diam. In in libero eget lacus aliquet blandit. Suspendisse posuere accumsan tellus non varius. Sed interdum, mi vel sodales mattis, enim sem rhoncus urna, in iaculis erat elit nec est.</p>
</div>

<br style="clear: both;"/>
<br />

<div class="big_block fix">
    <img src="http://placehold.it/100x300" />
    <p><strong>After fix. Image is kept within the container :) or more specifically, the parent stretches until the image is contained within itself.</strong></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, libero et venenatis sollicitudin, libero nisl laoreet felis, a viverra turpis felis a diam. In in libero eget lacus aliquet blandit. Suspendisse posuere accumsan tellus non varius. Sed interdum, mi vel sodales mattis, enim sem rhoncus urna, in iaculis erat elit nec est.</p>
</div>

<br /><br />

<div class="big_block fix">
    <p>After fix. But without image. Everything looks normal! </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, libero et venenatis sollicitudin, libero nisl laoreet felis, a viverra turpis felis a diam. In in libero eget lacus aliquet blandit. Suspendisse posuere accumsan tellus non varius. Sed interdum, mi vel sodales mattis, enim sem rhoncus urna, in iaculis erat elit nec est.</p>
</div>

CSS

p {
    margin-bottom: 1em;
}
strong {
    font-weight: bold;
}
.big_block {
    border:2px solid #333;
}

.big_block img {
    float: left;
}
.fix {
    overflow: hidden;
}