JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="container">
    
    <div id="div1" class="scroll">
        <p id= "par1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Etiam in turpis dapibus, pharetra tortor sed, ornare justo. Nam pellentesque consequat dolor in commodo.
        Ut commodo lectus vel tristique fermentum. Etiam bibendum accumsan risus, ac elementum nisi facilisis ut.
        Pellentesque pharetra lacus in hendrerit sodales. Maecenas eget neque sed neque sagittis rhoncus.
        Curabitur ac felis mattis, vehicula leo vel, dignissim arcu. In vitae consectetur nisl,
        eu porttitor ligula. Aenean metus enim, iaculis ut dictum ultrices, aliquet euismod eros. Morbi
        semper at dolor eget auctor. Vivamus ultricies turpis a arcu cursus tempor. Integer ac odio a lectus
        vulputate lobortis vel sed nisi.</p>
        <p id="par2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Etiam in turpis dapibus, pharetra tortor sed, ornare justo. Nam pellentesque consequat dolor in commodo.
        Ut commodo lectus vel tristique fermentum. Etiam bibendum accumsan risus, ac elementum nisi facilisis ut.
        Pellentesque pharetra lacus in hendrerit sodales. Maecenas eget neque sed neque sagittis rhoncus.
        Curabitur ac felis mattis, vehicula leo vel, dignissim arcu. In vitae consectetur nisl,
        eu porttitor ligula. Aenean metus enim, iaculis ut dictum ultrices, aliquet euismod eros. Morbi
        semper at dolor eget auctor. Vivamus ultricies turpis a arcu cursus tempor. Integer ac odio a lectus
        vulputate lobortis vel sed nisi.</p>
        <p id="par3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Etiam in turpis dapibus, pharetra tortor sed, ornare justo. Nam pellentesque consequat dolor in commodo.
        Ut commodo lectus vel tristique fermentum. Etiam bibendum accumsan risus, ac elementum nisi facilisis ut.
        Pellentesque pharetra lacus in hendrerit sodales. Maecenas eget neque sed neque...

CSS

.scroll
{
width:400px;
height:500px;
overflow:scroll;
float:left;
}

#container
{
width:1200px;
margin:auto
}

JavaScript

$(document).ready(function(){
    $('#div1').scroll(function() {
        //Almost there, thank you so much!; I want to use this code to indicate that if #par1 is at the top of div1, div2 should start scrolling, but it does not seem to work (again, syntax for the var might be wrong?) + another question: how can I make the scrolling in the div more smooth (animated?)
        
        //I don't know of a way to animate the scroll but if you trysearching "jQuery animate scroll" i'm sure you'll probably find something helpful.
// will do
        
        //You set this within the if, but it needed to be outside it.
        //ok!
       var par1toTop = $('#par1').position().top;
        // Just one more question here: should I always use >= because it calculates the distance from the <p id= > tag and hence does not take into account the lenghth of the entire paragraph? 
        
        //Yes, the position().top is from the top of the parent element (div) to the top of the current element (<p>), you can modify this to check for the bottom of the <p> with this code :
//$('#div1').height() >= ($('#par1').height() + $('#par1').position().top)
        
        
       if ($('#div1').scrollTop() >= par1toTop) {
          var par5toTop = $('#par5').position().top;

            //this check will ensure that if par5 is already at the top of the div, it will not scroll again.
          if ($('#div2').scrollTop() != par5toTop && par5toTop != 0) {
                $('#div2').scrollTop(par5toTop);
            }
        }
    });
});