JSFiddle - React, Tailwind, and code Playground

by ericmorand

HTML

<div id="container1" class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div>
    <span>This is some text, should appear <em>below</em> the red squares...</span>
</div>

<div id="container2" class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div>
    <span>This is some text, should appear <em>below</em> the red squares...</span>
</div>

CSS

.container > div {
    height: 64px;
    width: 64px;
    float: left;
    background-color: red;
    margin: 5px;
    border: solid 2px #ccc;
}

.container:after {
    clear: both;
    display: block;
    content: "";
}

#container2:after {
    display: none;
}