JSFiddle - React, Tailwind, and code Playground

by Arina Gavrilova

HTML

<div class="wrapper">
            <div class="header">Хедер</div>
            <div class="content-container clearfix">
                <div class="sidebar">
                    <p>Для нужного нам эффекта мы дадим основному блоку левый margin, чтобы он ужался направо, а боковую панель заfloat'им.</p>
                </div>
                <div class="content">
                    <p>У этого способа есть один очень серьезный недостаток. Обратите внимание, что в исходном HTML блок "sidebar" идет до блока "content" с основным содержимым. Не нужно думать, что так сделано случайно. Так сделано специально, потому что иначе этот самый способ с наложением колонки поверх margin'а не работал бы.</p>
                </div>
            </div>
            <div class="footer">Футер</div>
        </div>

CSS

.wrapper{
    width:550px;
    margin:0 auto;
    box-shadow:0 0 2px #ccc;
}
.header,
.footer{
    padding:10px;
    background:#ecf0f1;
}
.sidebar{
    float:left;
    width:150px;
    min-height:150px;
    padding:10px;
    background:rgba(46, 204, 113, 0.8);
    color:white;
}
.content{
    min-height:100px;
    padding:10px;
    background:#3498db;
    color:white;
    margin-left: 170px;
}
.clearfix:after{
    content:'';
    clear:both;
    display:table;
}