JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="wrap">
        <div class="sidebar">This is the static sidebar</div>
        <div class="main"><span>This is the main, and fluid div </span><div class="clear">This is a div that uses a clear:both syntax placed underneath the left div (because left div floats) - but I need it to be considered just in context of the right div, so it goes right underneath the sentence with yellow background.</div></div>
    </div>
</body>

CSS

html, body { background: #ccc; }
        .wrap      { margin: 20px; padding: 20px; background: #fff; overflow: hidden; }
        .main      { margin-left: 220px; overflow: auto; }
        .sidebar   { width: 200px; float: left; height: 200px }
        .main,
        .sidebar   { background: #eee; min-height: 100px; }
.clear {clear:both}
span {background: yellow}