JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <table>
        <tr>
            <td>
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget leo sed lorem venenatis elementum. Cras placerat lacinia consequat. Curabitur tellus dolor, tincidunt id malesuada a, euismod auctor erat. Integer lacus mi, egestas ac tempus eu, ultricies placerat augue. Proin nec orci nec lacus pulvinar gravida sed vitae turpis. Aliquam eu felis ligula. Nullam eget libero enim, in accumsan diam. Donec adipiscing erat massa. Vivamus vehicula dignissim fermentum. Vivamus congue ligula vitae augue viverra sit amet semper dolor porttitor. Vivamus sollicitudin dictum auctor. Quisque vitae blandit risus. Integer sem urna, ullamcorper a eleifend eu, fringilla at lacus. Integer dignissim euismod ipsum id faucibus. Nullam scelerisque rhoncus velit, sed hendrerit sem semper sed. Vestibulum iaculis pulvinar luctus.
                    <br />      <br />   
                    Sed eu elit suscipit sem faucibus lacinia. Maecenas hendrerit porttitor massa. Ut vel magna vitae dolor porta scelerisque. Suspendisse pulvinar nulla ac nisl gravida dictum. Aliquam sed enim elit, a laoreet lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus blandit dapibus venenatis. Nulla aliquet erat in justo tristique sed euismod neque tempor. In fermentum purus in massa accumsan lobortis. Nullam est nunc, vehicula ut tristique sed, gravida sit amet nisl. Nunc sit amet metus at velit elementum bibendum. Vestibulum ac tellus a libero feugiat mattis. Cras volutpat elit vel diam vestibulum sodales. Donec malesuada urna pharetra dui commodo posuere. Maecenas posuere mattis libero vitae dapibus. Maecenas felis diam, pretium id lobortis sed, dignissim vitae tortor.
                    <br />
                    <br />
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget leo sed lorem venenatis...

CSS

/*some generic layout stuff*/
div.content { width: 300px;  }
div { padding: 10px; }
td { vertical-align: top; padding: 15px; border: 1px solid black; }
div#sidebar { width: 100px; position: relative; }

/*hide show content to cover different test cases*/
div.hideshowlorem { display: block; }
div.hideshownumbers { display: block; }

/*css that gets toggled on/off*/
div#sidebar.fixed { position: fixed; bottom: 0px; }

JavaScript

$(document).ready(function() {

    var dynamic = false;
    var topOfSidebar = $("#sidebar").offset().top;
    var leftOfSidebar = $("#sidebar").offset().left;
    var botOfSidebar = topOfSidebar + $("#sidebar").height();
    var botOfScreen = $(window).height() + $(window).scrollTop();

    //if sidebar fits on screen then use fixed version of it
    if (botOfSidebar < $(window).height()) {
        $("#sidebar").addClass("fixed");
        $("#sidebar").css("top", topOfSidebar);
        $("#sidebar").css("left", leftOfSidebar);
    }
    else {
        dynamic = true;
    }

    $(window).scroll(function() {
        console.log($("#sidebar").css("position"));
        botOfScreen = $(window).height() + $(window).scrollTop();
        //return;
        if (botOfSidebar < botOfScreen && dynamic) {
            $("#sidebar").addClass("fixed");
            //$("#sidebar").css("bottom", 0);
            //$("#sidebar").css("left", leftOfSidebar);
        }
        else if (dynamic) {
            $("#sidebar").removeClass("fixed");
        }
    });
});