JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <header>header</header>
    
    <div class="wrap">
        <div class="middle">
            <h1>Динамический Контент</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum eum quisquam nostrum tenetur voluptate illum dicta a accusamus dolorem laboriosam repellat repellendus eligendi ducimus at dolorum soluta id reprehenderit vitae ex expedita obcaecati nisi illo ut optio voluptatibus aperiam qui culpa fugiat iure maxime. Eaque dicta placeat fugiat officia voluptate nulla a nostrum earum facilis illo. Tempore quis minima similique odit sunt amet praesentium eveniet illum voluptatum minus magnam accusamus nemo voluptate laudantium voluptates saepe consectetur molestias officiis enim veniam ea nulla quas eos consequuntur</p><p>libero dignissimos fugiat iure dolorum velit facilis facere alias nobis nam rerum totam deleniti perferendis. Fugit neque vitae hic debitis ratione reprehenderit pariatur placeat temporibus iste quia nisi natus suscipit quam. Veniam fuga fugit rem sit voluptate quis accusantium quos rerum ad iusto temporibus iste quasi vel! Impedit neque provident doloribus similique odit quos nemo facere veniam itaque ducimus accusantium fugiat incidunt ratione aspernatur a!</p>
        </div>
        <div class="l-sidebar">left</div>
        <div class="r-sidebar">right</div>
    </div>

    <footer>footer</footer>
</div>

CSS

.middle {
    width: 80%;
    margin-left: 10%;
    padding: 5%;
}
.middle, .l-sidebar, .r-sidebar {  
    float: left;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 300px;
}
.r-sidebar, .l-sidebar {
    width: 10%;
}
.l-sidebar {
    margin-left: -90%;
}




.middle {
    background: orangered;
}
.r-sidebar {
    background: purple;
}
.l-sidebar {
    background: green;
}
header {
    height: 150px;
    background: yellow;
}
.wrap:after {
    content: " ";
    display: table;
    clear: both;
}
footer {
    background: navy;
    text-align: center;
    
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}
html {
    position: relative;
    min-height: 100%;
}
.container {
    margin: 0 0 100px;
}