JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="floated-item">floated element</div>
<div id="content" class="content flow-cleared">
...
</div>
</div>
CSS
/* flow clearing */
.flow-cleared {
display: table;
}
.flow-cleared:after {
content: '. .';
display: block;
word-spacing: 99in;
height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
}
/* decoration styles */
.container {
border: 1px solid green;
padding: 10px;
}
.floated-item {
float: left;
margin-right: 10px;
width: 100px;
height: 100px;
color: white;
background: green;
}
.content {
background-color: antiquewhite;
border: 1px solid black
}
JavaScript
$(document).ready(function() {
var $contentElem = $('#content');
for (var i = 0; i < 200; i++) {
$contentElem.append(document.createTextNode('Text '));
}
});