JSFiddle - React, Tailwind, and code Playground

by Boris Shpakovsky

HTML

<div id="content">
    
</div>
<div id="sidebar">
    
</div>

CSS

#content {
    height: 2000px;
    width: 700px;
    float:left;
    background-color: #cf0;
}
#sidebar {
    height:500px;
    width: 300px;
    float: left;
    background-color: #fc0;
}

JavaScript

$(window).scroll(function() {
    if ($(this).scrollTop() > 500) {
       $('#content').css({
            'width': '1000px'
        });
    }
    if ($(this).scrollTop() < 500) {
        $('#content').css({
            'width': '700px'
        });
    }
});