JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="header">
        Header (I don't scroll)
    </div>
    <div id="content"></div>
</div>
<p>
    <button id="add">Add more content</button><button id="reset">Reset content</button>
</p>

CSS

body{
    font: 14px "Helvetica Neue", "Helvetica", sans-serif;
}
#wrapper{
    background: #eee;
    position: relative;
    border: 1px solid black;
    width: 200px;
}
#header{
    background: #ccc;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    line-height: 2em;
    text-align: center;
}
#content{
    padding: 0.3em;
    padding-top: 2.3em;
    overflow-y: auto;
    height: 150px;
}

JavaScript

$.fn.fitTo = function(target){
    var $el = $(this);
    $(target).bind('refit', function(){
        $el.width(this.clientWidth);
    });
};
$(function(){
    var $content = $('#content');
    $('#header').fitTo($content);
    $content.trigger('refit');
    
    // Demo
    function reset(){
        $content.html('Content (I do scroll)<br>Content<br>')
         .trigger('refit');
    }
    function add(){
        $content.append('Content<br>Content<br>')
         .trigger('refit');
    }
    $('#add').click(add);
    $('#reset').click(reset);
    reset();
});