JSFiddle - React, Tailwind, and code Playground

by Helmut Granda

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<div id="top">
    
    <div id="left">
        <pre>
Header Header Header Header Header Header Header Header Header
        </pre>
    </div>

    <div id="right">
        <pre>
Some code long code to display with scrollbars!
Some code long code to display with scrollbars!
Some code long code to display with scrollbars!
Some code long code to display with scrollbars!
Some code long code to display with scrollbars!
Some code long code to display with scrollbars!
Some code long code to display with scrollbars!
Some code long code to display with scrollbars!
Some code long code to display with scrollbars!
Some code long code to display with scrollbars!
Some code long code to display with scrollbars!
        </pre>
    </div>
    
</div>

CSS

#top {
    width: 350px;
    height: 350px;
    border: 1px solid #000000;
    float: left;
    clear: both;
}

#left {
    width: 100%;
    height: 100px;
    /*float: left;*/
    text-align: left;
    heigh: 100%;
    overflow: hidden;
    left: 0;
}

#right {
    width: 100%;
    height: 250px;
    /*float: right;*/
    text-align: left;
    overflow-y: auto;
    right: 0;
}

JavaScript

$(document).ready(function()
{
$("#left").scroll(function () {
    $("#right").scrollTop($("#left").scrollTop());
    $("#right").scrollLeft($("#left").scrollLeft());
});
$("#right").scroll(function () {
    $("#lef").scrollTop($("#right").scrollTop());
    $("#left").scrollLeft($("#right").scrollLeft());
});

});