JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>
<section>
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, explicabo rerum magnam incidunt repudiandae totam porro quas tempore est architecto nulla laboriosam rem aspernatur, repellendus sequi recusandae iure distinctio. Veritatis.Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Voluptate, explicabo rerum magnam incidunt repudiandae totam porro quas tempore est architecto nulla laboriosam rem aspernatur, repellendus sequi recusandae iure distinctio. Veritatis.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Voluptate, explicabo rerum magnam incidunt repudiandae totam porro quas tempore est architecto nulla laboriosam rem aspernatur, repellendus sequi recusandae iure distinctio. Veritatis.Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Voluptate, explicabo rerum magnam incidunt repudiandae totam porro quas tempore est architecto nulla laboriosam rem aspernatur, repellendus sequi recusandae iure distinctio. Veritatis.
  </div>
  <div class="right">
    <p>
      asdasdas
    </p>
  </div>
</section>

CSS

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100vw;
  height: 50px;
  background: #444;
}

section {
  height: calc(100% - 50px);
  *height: calc(100vh - 50px);
  display: flex;
  position: relative;
  overflow-x: hidden;
}

.left {
  width: calc(100% - 200px);
  font-size: 1.5em;
  line-height: 60px;
  color: #cdcdcd;
}

.right {
  width: 200px;
}

.right p {
  height: 80px;
  background: #555;
}

JavaScript

$(document).ready(function() {
  $(".right").sticky();
});

// stickyjs.com






























// Sticky Plugin v1.0.0 for jQuery
// =============
// Author: Anthony Garand
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
// Improvements by Leonardo C. Daronco (daronco)
// Created: 2/14/2011
// Date: 2/12/2012
// Website: http://labs.anthonygarand.com/sticky
// Description: Makes an element on the page stick on the screen as you scroll
//       It will only set the 'top' and 'position' of your element, you
//       might need to adjust the width in some cases.

(function($) {
  var defaults = {
      topSpacing: 0,
      bottomSpacing: 0,
      className: 'is-sticky',
      wrapperClassName: 'sticky-wrapper',
      center: false,
      getWidthFrom: ''
    },
    $window = $(window),
    $document = $(document),
    sticked = [],
    windowHeight = $window.height(),
    scroller = function() {
      var scrollTop = $window.scrollTop(),
        documentHeight = $document.height(),
        dwh = documentHeight - windowHeight,
        extra = (scrollTop > dwh) ? dwh - scrollTop : 0;

      for (var i = 0; i < sticked.length; i++) {
        var s = sticked[i],
          elementTop = s.stickyWrapper.offset().top,
          etse = elementTop - s.topSpacing - extra;

        if (scrollTop <= etse) {
          if (s.currentTop !== null) {
            s.stickyElement
              .css('position', '')
              .css('top', '');
            s.stickyElement.parent().removeClass(s.className);
            s.currentTop = null;
          }
        } else {
          var newTop = documentHeight - s.stickyElement.outerHeight() - s.topSpacing - s.bottomSpacing - scrollTop - extra;
          if (newTop < 0) {
            newTop = newTop + s.topSpacing;
          } else {
            newTop = s.topSpacing;
          }
          if (s.currentTop != newTop) {
            s.stickyElement
              .css('position', 'fixed')
             ...