JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="bootstrap.css">
<div id="wrapper">
    <div id="l">
        <div class="left">
            <p class="trigger">Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1</p>
        </div>
        <div class="left2">
            <p class="trigger">Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2</p>
        </div>
        <div class="thisone">
            <p>This one should stay always visible<p>        </div>
    </div>
    <div class="right">
        <p>Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem...</p>
        <p>Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem...</p>
        <p>Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem...</p>
        <p>Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem...</p>
        <p>Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem...</p>
        <p>Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem...</p>
        <p>Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem...</p>
        <p>Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem...</p>
        <p>Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem......

CSS

#wrapper {
    width: 900px;
    height: 1500px;
    height: 150px;
}
#l {
    width: 220px;
    float: left;
}
.left {
    width: 200px;
    height: 150px;
    border: solid black 1px;
    padding: 10px;
}
.left2 {
    width: 200px;
    height: 150px;
    border: solid black 1px;
    padding: 10px;
    display: none;
}
.thisone {
    width: 200px;
    margin-top: 10px;
    height: 150px;
    border: solid black 1px;
    padding: 10px;
}
.right {
    width: 560px;
    height: auto !important;
    padding: 50px;
    border: solid blue 1px;
    float: right;
}

JavaScript

var top = $('.thisone').offset().top;
$('.trigger').click(function () {
    $('.thisone').css('position','');
    $('.left2').toggle('slow',function(){
        top = $('.thisone').offset().top;
    });
    
    
});

    
    
    $(document).scroll(function(){
        $('.thisone').css('position','');
        top = $('.thisone').offset().top;
      $('.thisone').css('position','absolute');   $('.thisone').css('top',Math.max(top,$(document).scrollTop()));
    });