JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />   
        <p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p>
    
</div>
<div class="container">
    <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
    <p>Super short text behaves.</p>
</div>

CSS

.container {
    overflow: hidden;
    border: 2px solid #0f0;
    width: 400px;
    margin-bottom: 1em;
}

.container img {
    float: left;
    border: 2px solid red;
}

.container p {
    font-size: 0.8em;
    border: 2px solid blue;
    margin-left: 1em;
}