JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
<body>
<div style="margin:0 50px 0 50px;">
    <div id="leftCol">Фиксированный блок1 200px</div>
    <div id="rightCol">
        Резиновый блок1
        <div class="wrap">
        <div id="wrapper">
            <div id="leftCell">
                Резиновый блок2
            </div>
        </div>
        <div id="rightCell">
            Фиксированный блок2 200px
        </div>
    </div>
        Некий элемент который должен был оказаться внутри зеленого блока, под двумя колонками. Без оптекания(clear)
    </div>
</div>
</body>
</html>

CSS

#leftCol {
        border:1px solid red;
        height:200px;
        width:200px;
        float:left;
        
    }
    #rightCol {
        border:1px solid green;
        height:200px;
        margin-left:220px;
        text-align:center;
    }
    
    #wrapper{
        float: left;
        width: 100%;
    }
    
    #leftCell{
        background:aqua;
        margin-right: 200px; 
    }
    
    #rightCell{
        float: left;
        width: 200px;
        margin-left: -200px; 
        background: #FDE95E;
    }
.wrap{
overflow:hidden;
}