JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">
    <div class="div1-1">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
</div>
<br>
<div id="div2">
    <div class="div1-1">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
</div>
<br>
<div id="div3">
    <div class="div1-1">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
</div>

CSS

div {
    overflow-x: scroll;
    overflow-y: hidden;
    float: left;
    text-align: justify;
}
#div1 {
    height : 50px;
    width: 300px;
}
#div2 {
    height : 50px;
    width: 300px;
}
#div3 {
    height : 50px;
    width: 300px;
}
.div1-1 {
    height : 300px;
    width: 500px;
}

JavaScript

var $divs = $('#div1, #div2, #div3');
var sync = function (e) {
    var me = $(this);
    var $other = $divs.not(me).off('scroll');
    $divs.not(me).each(function (index) {
        $(this).scrollLeft(me.scrollLeft());
    });
    setTimeout(function () {
        $other.on('scroll', sync);
    }, 10);
}
$divs.on('scroll', sync);