JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>Fluid</title>
    <style type="text/css" media="screen">
        html, body { background: #ccc; }
        .wrap      { margin: 20px; padding: 20px; background: #fff; }
        .main      { margin-left: 220px; width: auto }
        .sidebar   { width: 200px; float: left; height: 200px }
        .main,
        .sidebar   { background: #eee; min-height: 100px; }
.clear {clear:both}
span {background: yellow}


    </style>
</head>
<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>
</html>