JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="main">
        <div id="left-bg"></div>
        <div id="container">a
            <br>a
            <br>a
            <br>a
            <br>a
            <br>a
            <br>a
            <br>a
            <br>a
            <br>a
            <br>a
            <br>a
            <br>a
            <br>a
            <br>a
            <br>a
            <br>a
            <br>
        </div>
    </div>
</body>

CSS

* {
    margin: 0;
}
html, body {
    padding:0;
    height: 100%
}
body {
    position: relative;
    overflow: auto;
}
#main {
    background: #333;
    height: 100%;
    position: relative;
    width: 100%;
    display: block;
}
#container {
    /* height: 100%; */
    width: 480px;
    background: #0f0;
    position: relative;
    margin-left: 50%;
    left: -240px;
}
#left-bg {
    /* min-height: 100%; */
    position: absolute;
    top: 0;
    left:0;
    background: #00f;
    width: 50%;
}

JavaScript

$( function() {
    $('#left-bg').height($('#container').height())
});