JSFiddle - React, Tailwind, and code Playground

HTML

<span id="wrapper1">
    <span class="div1">
    </span>
</span>
<span id="wrapper2">
    <span class="div2">
    aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd
    </span>
</span>

CSS

span{
    display:block;
}

#wrapper1, #wrapper2{
    width: 300px; 
    border: none 0px RED;
    overflow-x: scroll; 
    overflow-y:hidden;
}

#wrapper1{
    height: 20px; 
}

#wrapper2{
    height: 200px; 
}

.div1 {
    width:1000px; 
    height: 20px; 
}

.div2 {
    width:1000px; 
    height: 200px; 
    background-color: #88FF88;
    overflow: auto;
}

JavaScript

var wrapper1 = document.getElementById("wrapper1");
    var wrapper2 = document.getElementById("wrapper2");
        
    wrapper1.onscroll = function(){
        wrapper2.scrollLeft = wrapper1.scrollLeft;
    };

    wrapper2.onscroll = function(){
        wrapper1.scrollLeft = wrapper2.scrollLeft;                
    };