JSFiddle - React, Tailwind, and code Playground

HTML

<button>Resize</button>
<div class="content"><div>content</div></div>

CSS

body,html{
    padding:0;
    margin:0;
}
.content{
    position:relative;
    background-color:gray;
    width:400px;
    margin:0;    
    padding:0px;
    font-family:Arial,sang-serif;
    font-size:30px;
    color:white;
    
    padding-bottom:900px;
}
.small-content{
    padding-bottom:0px;
}
.content > div{
    padding:40px;
}

JavaScript

function getScrollBarDimensions(){
var elm = document.documentElement.offsetHeight ? document.documentElement : document.body,

    curX = elm.clientWidth,
    curY = elm.clientHeight,

    hasScrollX = elm.scrollWidth > curX,
    hasScrollY = elm.scrollHeight > curY,

    prev = elm.style.overflow,

    r = {
    vertical: 0,
    horizontal: 0
    };


    if( !hasScrollY && !hasScrollX ) {
    return r;
    }

elm.style.overflow = "hidden";

    if( hasScrollY ) {
    r.vertical = elm.clientWidth - curX;
    }

    if( hasScrollX ) {
    r.horizontal = elm.clientHeight - curY;
    }
elm.style.overflow = prev;


return r;
}

$('button').click(function(){
    $('.content').toggleClass('small-content');
    $(window).resize();
})

$(window).resize(function(){
    var $content = $('.content');
    var left = ($(window).width()+getScrollBarDimensions().vertical-$content.width())*0.5+"px";
    $content.css({"left":left});
}).resize()