JSFiddle - React, Tailwind, and code Playground

HTML

<button class="clickme">Toggle click</button>
<div class="reveal"></div>
<div class="parent">
    <div class="content"></div>
    <div class="bar">BAR</div>
</div>

CSS

body, html {
    padding: 0;
    margin: 0;
}
.clickme {
    font-weight: 900;
    font-size: 24px;
    display: block;
}
.reveal {
    width: 200px;
    background-color: cornflowerblue;
    height: 600px;
    float: left;
}
.content {
    margin: 0 auto;
}
.parent {
    height: 300px;
    position: fixed;
    right: 0;
    left: 0px;
    background-color: tomato;
    overflow: auto;
    transition: left 1s ease-in-out;
}
.content {
    height: 18000px;
    width: 300px;
    background-color: firebrick;
}
.bar {
    padding: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    line-height: 20px;
    text-align: center;
    width: 50px;
    height: 20px;
    background-color: beige;
}
.active ~ .parent {
    left: 200px;
}

JavaScript

$(function () {
    $('.content').width($('body').width() - 50);
});

var stickToBottom = function (parent) {
    var bar = parent.querySelector('.bar');
    var top = bar.offsetTop;
    parent.addEventListener('scroll', function (e) {
        var el = e.currentTarget;
        bar.style.bottom = -el.scrollTop + "px";
        bar.style.left = el.scrollLeft + "px";
    });
}
var parent = document.querySelector('.parent');
stickToBottom(parent);

$('.clickme').click(function () {
    $(this).toggleClass('active');
});