JSFiddle - React, Tailwind, and code Playground

by robdodson

HTML

<div id="container" class="clearfix">
    <div id="first">
        <p>Foobar</p>
        <p>Foobar</p>
        <p>Foobar</p>
        <p>Foobar</p>
        <p>Foobar</p>
        <p>Foobar</p>
        <p>Foobar</p>
    </div>
    <div id="second">
        <p>Baz</p>
    </div>
</div>

CSS

#container {
    width: 200px;
    border: 1px solid #000;
}

#first {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #F00;
}

#second {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #0F0;
}

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }