JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <div class="img-section"><img src="http://www.feedsocial.com/highslide/images/full-image.jpg"></div>
        <div class="text-section"><h1>Hello text</h1><p>Hello hello! Hello hello! Hello hello! Hello hello! Hello hello! Hello hello! Hello hello! Hello hello!</p> </div>
    </li>
    <li>
        <div class="img-section"></div>
        <div class="text-section">How to avoid the red box getting out of the black one? (and hiding another list element)</div>
    </li>
</ul>

CSS

ul {
    width: 600px;
}

ul li {
    border: solid 1px #000;
    margin: 15px 0;
}

.img-section {
    float: left;
    border: solid 1px red;
}

.text-section { 
    padding: 5p