JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="topscrl">
        <div id="topfake"></div>
    </div>
    <div id="content">veryveryveryveryveryverylongstringwithoutspaces_oqqqqqqqqqqqqqqqqqqqqqqqqwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwdddddddddddddddddddddddddddddssssssssssssssssssaaaaaaaaaaaaaaaaaaaasddddddddddddd sdfwerwe sdf sdf   sdf sdf sdf sdf sd fsd f </div>
</div><!-- container -->

CSS

#content {
    width: 100%;
    background-color: #999999;
    overflow-x: scroll;
}
#container {
    height: 100px;
    width: 100%;
}
#topscrl  {
    height: 20px;
    width: 100%;
    overflow-x: scroll;
    display: none;
}
#topfake {
    height: 1px;
}

JavaScript

function topsclr() {
    document.getElementById("content").scrollLeft = document.getElementById("topscrl").scrollLeft;
}

function bottomsclr() {
    document.getElementById("topscrl").scrollLeft = document.getElementById("content").scrollLeft;
}
window.onload = function() {
    document.getElementById("topfake").style.width = document.getElementById("content").scrollWidth + "px";
    document.getElementById("topscrl").style.display = "block";
    document.getElementById("topscrl").onscroll = topsclr;
    document.getElementById("content").onscroll = bottomsclr;
};