JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
    
    <div id="wrapper">
      <div id="fixed">
        [Fixed Content]
      </div><!-- /fixed -->
      <div id="scroller">
        [Scrolling Content]
          <br /><br /><br /><br /><br /><br />
        [Scrolling Content]
      </div><!-- /scroller -->
    </div><!-- /wrapper -->
    
</div><!-- /page -->

CSS

/*Important*/
#wrapper { position: relative; }
#fixed { position: absolute; top: 0; right: 0; }
#scroller { height: 100px; overflow: auto; }

/*Stylistic*/
#page { width: 200px; margin-left: auto; margin-right: auto; }
#fixed { background-color: #BBB; }
#scroller { padding: 8px; }

JavaScript

//Determine the difference in widths between
//the wrapper and the scroller. This value is
//the width of the scroll bar (if any).
var offset = $('#wrapper').width() - $('#scroller').get(0).clientWidth;

//Set the right offset
$('#fixed').css('right', offset + 'px');