JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<body>
<div class="holder">
    <div class="top"></div>
    <div class="lside">78</div>
    <div class="rside"></div>
    <div class="bottom"></div>
</div>
</body>

CSS

* {
    padding:0;
    margin:0;
}
div {
    position:relative;
}
.holder {
    width:960px;
    left:50%;
    margin-left:-460px;
    display:table;
}
.top {
    height:200px;
    margin-bottom:20px;
    background:silver;
}
.lside {
    float:left;
    width:230px;
    height:800px;
    background:red;
}
.rside {
    float:right;
    width:710px;
    height:800px;
    background:silver;
}
.fullsize {
    width:100%;
    float:left;
    clear:both;
    height:800px;
}
.disap {
    display:none;
}

JavaScript

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 220 ) {
            $(".rside").addClass("fullsize");
            $(".lside").addClass("disap");
            
        } else {
            $(".rside").removeClass("fullsize");
            $(".lside").removeClass("disap");
        }
    });
  });