JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="textBox1" class="textBox">
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />dsfsdf sdf sdfs fsdf asdf sdaf dsaf as fdf dfsa dsfsdf dfssdf sdfsfdds
        dsfdfsa fdsasdf eewrrwe fdgsgfs sdfggsdf tererret sgfdgfd gfssfg dfssdf
        sdfsfdds dsfdfsa fdsasdf eewrrwe fdgsgfs sdfggsdf tererret sgfdgfd gfssfg</div>
    <div
    id="textBox2" class="textBox">
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />dsfsdf sdf sdfs fsdf asdf sdaf dsaf as fdf dfsa dsfsdf dfssdf sdfsfdds
        dsfdfsa fdsasdf eewrrwe fdgsgfs sdfggsdf tererret sgfdgfd gfssfg dfssdf
        sdfsfdds dsfdfsa fdsasdf eewrrwe fdgsgfs sdfggsdf tererret sgfdgfd gfssfg</div>
<div
id="textBox3" class="textBox">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />dsfsdf sdf sdfs fsdf asdf sdaf dsaf as fdf dfsa dsfsdf dfssdf sdfsfdds
    dsfdfsa fdsasdf eewrrwe fdgsgfs sdfggsdf tererret sgfdgfd gfssfg dfssdf
    sdfsfdds dsfdfsa fdsasdf eewrrwe fdgsgfs sdfggsdf tererret sgfdgfd gfssfg</div>
    </div>

CSS

.textBox {
    background: green;
    width: 100px;
    height: 200px;
    overflow: auto;
    float:left;
}
#container {
    float:left;
}

JavaScript

var $boxes = $("#textBox1,#textBox2,#textBox3"),
    active;

$boxes.scrollTop(150);

// set initial scrollTop values
updateScrollPos();

// bind mouseenter: 
// 1) find which panel is active 
// 2) update scrollTop values

$boxes.mouseenter(function () {
    active = this.id;
    updateScrollPos();
});

// bind scroll for all boxes
$boxes.scroll(function (e) {
	
	$this = $(this);
	
	// check to see if we are dealing with the active box
	// if true then set scrolltop of other boxes relative to the active box
	if(this.id == active){
	
		var $others = $boxes.not($this),
			offset = $this.scrollTop()-$this.data("scroll"),
			half_offset = offset / 2;
			
		$others.each(function(){
			$this = $(this);
			$this.scrollTop($this.data("scroll") - half_offset);
		});
	}
	
});

// utility function: assign scrollTop values to the respective element's data attribute (data-scroll)
function updateScrollPos() {
    $boxes.each(function(){
        $this = $(this);
        $this.data("scroll",$this.scrollTop());
    });
}