JSFiddle - React, Tailwind, and code Playground

by csaltyj

HTML

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

CSS

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

.cs-image {
    float: left;
    border: 2px solid red;
}

.cs-summary {
    font-size: 0.8em;
    border: 2px solid blue;
    float: left;
    margin-left: 1em;
}