JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">

        <div id="header">
            header
        <!--End header-->
        </div>

        <div id="sidebar">
            sidebar
        <!--End sidebar-->
        </div>

        <div id="content">
            content
            <br/>
            content
            <br/>
            content
            <br/>
            content            
            <br/>
            content
            <br/>
            content
            <br/>
            content
            <br/>
            content
            <br/>
            content
            <br/>
            content
            <br/>
            content
            <br/>
            content
            <br/>
            content
            <!--End content-->
        </div>


        <div style="clear: both"></div>
        <div id="footer">
            footer
            <!--End footer-->
        </div>
        
        <script>
            window.onresize();
        </script>

        <!--End wrapper-->
    </div>

CSS

body
{
    background-color: #869197;
}
/*Page elements*/
#wrapper
{
    width: 900px;
    margin-left:auto;
    margin-right:auto;
    background-color:rgba(255,255,255,0.7);
    overflow:hidden;

}
#header
{
    width:100%;
    height:50px;
    background-color:#02AEF5;
}
#footer
{
    width:100%;
    height:50px;
    background-color:black;
}
#sidebar
{
    width:130px;
    padding:10px;
    display:inline-block;
    background-color:red;
    height:100%;
}
#content
{
    width:730px;
    padding:10px;
    display:inline-block;

}

JavaScript

$(window).bind("load resize", function () {
    $("#footer").stickyFooter();
});
// sticky footer plugin
(function ($) {
    var footer;

    $.fn.extend({
        stickyFooter: function (options) {
            footer = this;

            positionFooter();

            $(window)
              .scroll(positionFooter)
              .resize(positionFooter);

            function positionFooter() {
                var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
                if (docHeight < $(window).height()) {
                    var diff = $(window).height() - docHeight;
                    if (!$("#sticky-footer-push").length > 0) {
                        $(footer).before('<div id="sticky-footer-push"></div>');
                    }
                    $("#sticky-footer-push").height(diff);
                }

                $("#sidebar").height($(window).height() - $(footer).height() - $("#header").height());
                //alert($(footer).position().top);

            }
        }
    });
})(jQuery);