JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.scroll.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div class="sampleContent">
		<div style="width: 50%; float:left; position: relative;">
			<div id="scrollableContentLeft">
				<h1>元のテキスト</h1>
				<table style="height:800px; width:1100px;" class="codeTable">
					<tbody>
						<tr><td class="removed"><span>&lt;div </span><span class="chunk-removed">style="width:900px;</span><span> height: </span><span class="chunk-removed">400px;"&gt;</span></td> </tr>
						<tr><td><span>				&lt;p&gt;</span></td></tr>
						<tr><td><span>				Lorem ipsum dolor sit amet, dicat maluisset urbanitas has id, consul admodum contentiones mel te. Nam paulo utinam qualisque in, lorem definiebas theophrastus mea ex. &lt;br/&gt;</span></td></tr>
						<tr><td><span>				Scripta sanctus definitionem qui at. Erat fugit dicit at sea, ne quo alia illud viris. &lt;br/&gt;</span></td></tr>
						<tr><td><span>				Latine legendos ut eum. Usu purto nihil dolor ei, has et iriure scripta, ex antiopam electram duo. &lt;br/&gt;</span></td></tr>
						<tr><td><span>				&lt;/p&gt;</span></td></tr>
						<tr><td class="removed"><span class="chunk-removed">				Te ludus malorum...

CSS

#scrollableContentLeft {
			height:400px;
			width:100%;
			overflow:hidden;
		}

		#scrollableContentRight {
			height:400px;
			width:100%;
			overflow:hidden;
		}

		.codeTable {
			border-collapse: collapse;
			border-spacing: 0;
		}

		.removed {
			background-color: rgb(252, 216, 217);
		}

		.chunk-removed {
			background-color: #ff4d4d !important;
		}

		.line-empty {
			background-color: lightgrey;
		}

		.line-inserted {
			background-color: lightgreen;
		}

			.line-inserted > span {
				background-color: #00cc00 !important;
			}

		.line-modified {
			background-color: lightgreen;
		}

		.chunk-inserted {
			background-color: #00cc00 !important;
		}

JavaScript

$(function () {
			$("#scrollableContentLeft").igScroll({
				alwaysVisible: true,
				syncedElemsV: [$("#scrollableContentRight")],
				syncedElemsH: [$("#scrollableContentRight")]
			});

			$("#scrollableContentRight").igScroll({
				alwaysVisible: true,
				syncedElemsV: [$("#scrollableContentLeft")],
				syncedElemsH: [$("#scrollableContentLeft")]
			});
		});