JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="wrap">
    <div class="row">
        <div class="column left">
            <p>Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi.</p>
        </div>
        <div class="column right">
            <p>Suspendisse potenti. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla.</p>
            <p>Proin faucibus arcu quis ante. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Phasellus dolor.</p>
        </div>
    </div>
</div>

SCSS

.wrap{
    width: 100%;
    min-width: 450px;
    overflow-x: hidden;
}
.row{
    display: table;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    font-family: sans-serif;
    &:after{
        content: '';
        display: block;
        clear: both;
    }
    .column{
        display: table-cell;
        box-sizing: border-box;
        padding: 15px;
        position: relative;
    }
    .left{
        width: 40%;
        background-color: #c61539;
        color: #fff;
        &:before{
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: -1000%;
            width: 1000%;
            background-color: #c61539;
        }
    }
    .right{
        background-color: #eee;
        width: 60%;
        &:after{
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: -1000%;
            width: 1000%;
            background-color: #eee;
        }
    }
}
html,body{
    padding: 0;
    margin: 0;
}
p{
    margin: 0 0 15px 0;
    &:last-child{
        margin: 0;
    }
}