JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contenido">
    <div id="texto">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac magna dolor. Praesent vel sem nec risus viverra eleifend in ac sem. Donec a massa ut neque feugiat placerat. Morbi aliquet tincidunt risus nec convallis. Integer sagittis ac lacus non sodales. Sed et ultricies velit, eu tincidunt felis. Etiam ullamcorper, velit nec porttitor elementum, nibh neque rutrum magna, in dictum enim lorem vel sem. Nulla pellentesque pulvinar nulla sit amet auctor. Morbi tincidunt, arcu et laoreet luctus, justo massa dictum lacus, non laoreet elit augue et magna. Donec tempus accumsan aliquet. Integer commodo tortor ut porttitor semper. Nulla sit amet feugiat massa.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac magna dolor. Praesent vel sem nec risus viverra eleifend in ac sem. Donec a massa ut neque feugiat placerat. Morbi aliquet tincidunt risus nec convallis. Integer sagittis ac lacus non sodales. Sed et ultricies velit, eu tincidunt felis. Etiam ullamcorper, velit nec porttitor elementum, nibh neque rutrum magna, in dictum enim lorem vel sem. Nulla pellentesque pulvinar nulla sit amet auctor. Morbi tincidunt, arcu et laoreet luctus, justo massa dictum lacus, non laoreet elit augue et magna. Donec tempus accumsan aliquet. Integer commodo tortor ut porttitor semper. Nulla sit amet feugiat massa.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac magna dolor. Praesent vel sem nec risus viverra eleifend in ac sem. Donec a massa ut neque feugiat placerat. Morbi aliquet tincidunt risus nec convallis. Integer sagittis ac lacus non sodales. Sed et ultricies velit, eu tincidunt felis. Etiam ullamcorper, velit nec porttitor elementum, nibh neque rutrum magna, in dictum enim lorem vel sem. Nulla pellentesque pulvinar nulla sit amet auctor. Morbi tincidunt, arcu et laoreet luctus, justo massa...

CSS

div#contenido {width:800px; margin:20px auto; background-color:orange; padding:10px; }
div#texto { width:650px; border:1px solid black; }
div#flotante { width:140px; background-color:red; color:white; position:absolute;}

JavaScript

function resize(ele, ref){
  var off=ref.offset();
  ele.css("top",off.top+"px");
  ele.css("left",(off.left+ref.width()+10)+"px"); 
};
function scrollChange(ele, ref){
    var windowpos = jQuery(window).scrollTop();
    var offEle=ele.offset();
    var offRef=ref.offset();
    var dif=Math.max(offRef.top, Math.min(offRef.top+ref.height()-ele.height(),windowpos));
    ele.css("top",dif+"px");
}
jQuery(document).ready(function() {
    var flotante = jQuery("#flotante");
    var referencia= jQuery("#texto");
    resize(flotante,referencia);
    jQuery(window).on("resize",function(){ resize(flotante,referencia); });
    jQuery(window).on("scroll",function(){ scrollChange(flotante,referencia); });
    
});