JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
<div class="holder">    <div class="left_block">Left Block</div>
</div>
    <div class="holder">    <div class="right_block">Right Block</div>
</div>
</div>

SCSS

*{
    margin: 0;
    padding: 0;
}
.main{
    position: relative;
    width: 500px;
    margin: 0 auto;

}
.holder{
    position: relative;
    clear: both;
}
.left_block,
.right_block{
    z-index: 1;
    position: relative;
    height: 150px;
    width: 50%;
    &:before{
        z-index: -1;
        position: absolute;
            top: 0;
            bottom: 0;
            width: 2500px;
            content: "";
            background: #ccc;
        }

}
.left_block{
    float: left;
    &:before{
            right: 0;
        }
}
.right_block{
    float: right;
            &:before{
                left: 0;
            }
}