JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<div class="wrapper clearfix">
   <div class="main">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas repudiandae vero earum? Architecto at ipsa praesentium amet unde enim facere atque eaque asperiores natus! Saepe deleniti minima vero assumenda rerum.
   </div>
   <div class="left">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ullam iste obcaecati qui cum sed modi. Quos consectetur voluptas odit voluptatibus reiciendis cumque nesciunt vitae esse quam doloremque aperiam totam.
   </div>
   <div class="right">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste expedita quisquam optio ex doloremque blanditiis laboriosam maiores! Iusto libero voluptas optio at adipisci corporis dignissimos doloremque sit fugit tempora debitis.
   </div>
</div>

CSS

html {
    font-family: sans-serif;
}

.main {
    width: 100%;
    float: left;
    padding: 0 210px;
    box-sizing: border-box;
}
.left {
    background: #eee;
    width: 200px;
    float: left;
    margin-left: -100%;
    padding: 0 10px;
    box-sizing: border-box;
}
.right {
    background: #ddd;
    width: 200px;
    float: left;
    margin-left: -200px;
    padding: 0 10px;
    box-sizing: border-box;
}

@media (max-width: 999px) {
 
.main {
    float: none;
    padding: 0;
}
 
.left, .right {
    width: auto;
    float: 0;
    margin: 0;
}

/* Это в самый низ css */
/* clearfix */
.clearfix {
	display: table;
}
.clearfix:after {
	content: '1 1';
	font: .1px/0 a;
	display: block;
	word-spacing: 99in;
	overflow: hidden;
}
/* end clearfix */