JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="header">My Header</div>
    asdasdasdasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
    asdasdasdad<br>
    asdasdasdad<br>
    asdasdasdad<br>
    asdasdasdad<br>
    asdasdasdad<br>
    asdasdasdad<br>
    asdasdasdas<br>
    asdasdasdad<br>
    asdasdasdad<br>
    asdasdasdad<br>
    asdasdasdad<br>
    asdasdasdad<br>
    asdasdasdad<br>
    asdasdasdad<br>
    asdasdasdas<br>
    asdasdasdad<br>
    asdasdasdad<br>
    asdasdasdad<br>
    asdasdasdad<br>
    asdasdasdad<br>
    asdasdasdad<br>
    
    
</div>

CSS

#container{
    width:200px;
    height:300px;
    border:1px solid red;
    overflow:auto;
    position:relative;
}
#header{
    position:absolute;
    background:gray;
    color:white;
    text-align:center;
}

JavaScript

var cw = $('#container').innerWidth();
var cs = $('#container').scrollTop();

$('#header').css({
    'width': cw + "px"
});

$('#container').scroll(function() {
    $('#header').css({
        'top': $('#container').scrollTop(),
        'left': $('#container').scrollLeft()
    })
})