JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
			<div id="leftChild">
				<div>left child</div>
				<div class="row row-1">some content</div>
				<div class="row row-2">other content</div>
				<div class="row row-3">more content</div>
			</div>
			<div id="rightChild">
				<div>right child</div>
				<div class="row row-1">
					<span class="col1">column 1 content</span>
					<span class="col2">column 2 content</span>
					<span class="col3">column 3 content</span>
					<span class="col4">column 4 content</span>
					<span class="col5">column 5 content some really long content to trigger scrolling just for the purpose of this example</span>
				</div>
				<div class="row row-2">
					<span class="col1">column 1 content</span>
					<span class="col2">column 2 content</span>
					<span class="col3">column 3 content</span>
					<span class="col4">column 4 content</span>
					<span class="col5">column 5 content some really long content to trigger scrolling just for the purpose of this example</span>
				</div>
				<div class="row row-3">
					<span class="col1">column 1 content</span>
					<span class="col2">column 2 content</span>
					<span class="col3">column 3 content</span>
					<span class="col4">column 4 content</span>
					<span class="col5">column 5 content some really long content to trigger scrolling just for the purpose of this example</span>
				</div>
			</div>
		</div>

CSS

.hover {
	background-color: lightblue;
}

.row {
	height: 50px;
	padding: 5px;
	white-space: nowrap;
}

.row > span {
	display: inline-block;
	border: 5px solid black;
}

#leftChild, #rightChild {
	float: left;
}

#rightChild {
	width: 300px;
	overflow: auto;
}

#rightChild .row {
	display: inline-block;
}

JavaScript

$(document).ready(function() {
	var rows = document.getElementsByClassName('row');
  for (var i = 0; i < rows.length; i++) {
    rows[i].onmouseenter = function(event) {
      var row = this.className.match(/row-[\d]+/);
      $('.' + row[0]).addClass('hover');
    };

		rows[i].onmouseleave = function(event) {
			$('.hover').removeClass('hover');
		};
	}
});