JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1" style="float:left;overflow:scroll;height:100px;width:200px;
    white-space: nowrap;">

<p>lulz lulz lulz lulz lulz lulz lulz lulz lulz </p>
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
</div>

<div id="div2" style="float:right;overflow:scroll;height:100px;width:200px;
    white-space: nowrap;">
<p>lulz lulz lulz lulz lulz lulz lulz lulz lulz </p>
<p>lulz</p>
<p>lulz</p>
<p>lulz</p>
</div>

JavaScript

$(document).ready(function()
{
$("#div1").scroll(function () { 
        $("#div2").scrollTop($("#div1").scrollTop());
        $("#div2").scrollLeft($("#div1").scrollLeft());
    });
$("#div2").scroll(function () { 
        $("#div1").scrollTop($("#div2").scrollTop());
        $("#div1").scrollLeft($("#div2").scrollLeft());
    });

});