JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper1">
  <div id="div1">
    1111 1weffw1111111111   1111 11111111111   1111 11111111111   1111 11111111111 wfwfw  1111 11111111111   1111 11111111wefwf111   1111 11111111111   1111 1111fwwefwfefwfe1111111   1111 11111111111   1111 11111111111   1111 fefwfew   1111 11111111111   1111 11111111111   1111 11111111111
  </div>
</div>
<div id="wrapper2">
  <div id="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
  </div>
</div>

CSS

#wrapper2 {
  width: 300px;
  border: none 0px RED;
  overflow-x: scroll;
  overflow-y: hidden;
    border:1px solid black;
}

#wrapper1 {
    width: 300px;
  border: none 0px RED;
  overflow-x: hidden;
  overflow-y: hidden;
    border:1px solid black;
}



#wrapper1 {
  height: 120px;
}

#wrapper2 {
  height: 100px;
}

#div1 {
  width: 1000px;
  height: 50px;

}

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

JavaScript

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