JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topbar-wrapper">
    <div class="topbar">
        <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div...

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
#topbar-wrapper {
    height: 45px;
    width:70%;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
}
.container {
    padding-top: 45px;
    height: 100%;
}
.container #sidebar-wrapper, .container #center-wrapper {
    height: 100%;
}
#sidebar-wrapper {
    width: 30%;
    float: left;
    overflow: hidden;
}
#center-wrapper {
    width: 70%;
    float: right;
    overflow: scroll;
}
.center {
    width: 150%;
}
.topbar {
    height: 100%;
    width: 150%;
}
/* Demo styles */
 #topbar-wrapper, #sidebar-wrapper, #center-wrapper {
    background: #eee;
    border: 3px dashed #ddd;
    font-family: Helvetica Neue, Arial, sans-serif;
    text-align: center;
}
.cell {
    width: 50px;
    height: 30px;
    float: left;
    border: 1px solid black;
}
.sidebar .cell {
    float: none;
    width: 100%;
}
}

JavaScript

var _scroller = document.getElementById('center-wrapper'),
        _swrapper = document.getElementById('sidebar-wrapper'),
        _twrapper = document.getElementById('topbar-wrapper');
    
        _scroller.onscroll = function() {
        _swrapper.scrollTop = _scroller.scrollTop;
        _twrapper.scrollLeft = _scroller.scrollLeft;
    };