JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content-wrap">
    <div id="content">
    </div>
    <div id="leftbar">
    </div>
</div>

CSS

#content-wrap
{
    clear: both;
    float: left;
    width: 100%;
    background: green;
}
#content
{
    position: relative;
    text-align: left;
    padding: 0;
    margin: 0 auto;
    height: 200px;
    width: 200px;
    overflow: auto;
    background: red;
}
#leftbar
{
    background-color: transparent;
    width: 100px;
    height: 200px;
    position: absolute;
    top: 10px;
    left: 10px;
    background: blue;
}

JavaScript

$(window).bind('load resize', function() {
    var content = $('#content');
    var leftbar = $('#leftbar');
    var leftbarEdge = leftbar.width() + leftbar.offset().left;

    if (leftbarEdge > content.offset().left) {
        content.css({
            left: leftbarEdge - content.offset().left
        });
    }
});