JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    Wrapper
    <div class="header">
             header
    </div> 
    <div class="wrapleft">       
        <div class="left">
            <div class="subwrapper">
                Once this reach the left border, it should stay there.
            </div>
        </div>
    </div>    
    <div class="right">
            right
    </div> 
        <div class="footer">
            footer
        </div>     
</div>

CSS

.wrapper{
   width: 100%;
   margin: 0 auto;
   text-align:center;
   display: block;
}
.header{
   float: left;
   width: 100%;
   background-color: #f4f4f4;
   text-align:left;
}
.wrapleft{
   float: left;
   width: 100%;
   background-color: #cfcfcf;
    text-align:center;
}
.left{
   margin-right: 250px;
   background-color: #afeeee;
   height: 200px;
   text-align:right;
}
.right{
   float: right;
   width: 240px;
   margin-left: -240px;
   background-color: #98fb98;
   height: 200px;
}
.footer{
   float: left;
   width: 100%;
   background-color: #f4f4f4;
}
body {
   padding: 0px;
   margin: 0px;
}

.subwrapper div {
    height: 100px;
    width:200px;
    margin: 0;
    text-align:center;
    color:white;
    display: inline-block;
    vertical-align:top;
    }
.subwrapper {
    background:purple;
    margin: 0 auto;
    display: block;
    max-width: 600px;
}

.first {
    background:blue;
}

.second {
    background:green;
}

.third {
    background:red;
}
.first, .second, .third {
    float:left;
}

@media only screen and (max-device-width: 600px) {
    .first, .second, .third {
        float:none;
    }
}