JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="wrapper">
    
    <div class="col_left">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad atque blanditiis, commodi consequatur cupiditate ea eaque eveniet incidunt inventore, itaque laborum magnam officiis porro quibusdam quis, repellendus sed suscipit!</p>
    </div>
    <div class="col_right">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad atque blanditiis, commodi consequatur cupiditate ea eaque eveniet incidunt inventore, itaque laborum magnam officiis porro quibusdam quis, repellendus sed suscipit!</p>
    </div>
    
    <div class="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad atque blanditiis, commodi consequatur cupiditate ea eaque eveniet incidunt inventore, itaque laborum magnam officiis porro quibusdam quis, repellendus sed suscipit!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad atque blanditiis, commodi consequatur cupiditate ea eaque eveniet incidunt inventore, itaque laborum magnam officiis porro quibusdam quis, repellendus sed suscipit!</p>
    </div>
    
</div>

CSS

.wrapper {}
.wrapper:after {
    display: block;
    clear: both;
    
    content: "";
}

    .col_left,
    .col_right {
        float: left;
        width: 53px;

        background: #eee;
    }

    .col_right {
        float: right;

        background: #aaa;
    }

    .main {
        float: none;
        max-width: 1400px;
        margin: auto 53px;

        background: #e01;
    }

    p {
        margin: 0 0 20px;
    }