JSFiddle - React, Tailwind, and code Playground

HTML

<div class="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 = $('.center-wrapper'),
    _scrollernative = _scroller.get(0),
    _swrapper = $('.sidebar-wrapper').get(0),
    _twrapper = $('.topbar-wrapper').get(0);

_scroller.scroll(function (e) {
    _swrapper.scrollTop = _scrollernative.scrollTop;
    _twrapper.scrollLeft = _scrollernative.scrollLeft;
});