JSFiddle - React, Tailwind, and code Playground

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>

CSS

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

{
    color: white;
    width: 550px;
}

JavaScript

$(document).ready(function()
                  {
                      $('.container').hide();
                      $('#container1').scrollLeft(100);
                      $('#container2').animate({scrollLeft: 100 + 'px'}, function() { $('.container').show()});
                  });