JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<div class="container">
    <div class="inner-w">
        
        <div class="block center">Center</div>  
        
        <div class="block left">Left</div>
        
        <div class="block right">Right</div>

    </div>
</div> <!-- .container -->

CSS

* {
    box-sizing: border-box;
}

.container {
    width: 100%;
    float: left;
    overflow: hidden; /* should be clearfix instead */
}

.container .inner-w {
    position: relative;
    max-width: 50em;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden; /* should be clearfix instead */
}

.block {
    width: 100%;
    float: left;
    min-height: 10em; /* just for show */
}

@media (min-width: 50em) {  

    .center {
        width: 50%;
        position: relative;
        left: 25%;
    }

    .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 25%;
    }

    .right {
        float: right;
        width: 25%;    
    }
} /* end break-point */















/* just for show */
.container {
    border: 1px solid blue;
}

.container .inner-w {
    border: 1px solid orange;
}

.block {
    border: 1px solid red;
    min-height: 10em; /* just for show */
    padding: 1em;
}