JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<div class="container" id="container1">
    <div class="text" id="text1">Some long text1.  Some long text2.  Some long text3.  Some long text4.  Some long text5.</div>
</div>

<div class="container" id="container2">
    <div class="text" id="text2">Some long text1.  Some long text2.  Some long text3.  Some long text4.  Some long text5.</div>
</div>

<button>scroll</button>

CSS

.container
{
    background-color: black;
    width: 200px;
    overflow: auto;
}
.text

{
    color: white;
    width: 550px;
}

button {
    position: absolute;
    top: 50px;
    left: 300px;
}

JavaScript

$('.container').hide();

$('button').click(function() {
    $('#container1').scrollLeft( 100 );
    $('#container2').animate({
        scrollLeft: '100px'
    }, function() { $('.container').show() });
});