JSFiddle - React, Tailwind, and code Playground

HTML

<header class="container">
    <div class="row">
        <div class="col-sm-12">Header</div>
    </div>
</header>
<div role="main" class="container">
    <div class="row">
        <div class="col-sm-8 col-lg-9">Main Content</div>
        <aside class="col-sm-4 col-lg-3">
            <section class="budget-summary">
                 <h2 class="text-center">Resumo</h2> 
            </section>
        </aside>
    </div>
</div>
<footer>
    <div class="row">
        <div class="col-sm-12">Footer</div>
    </div>
</footer>

CSS

body > *, aside {
    border: 1px solid #ccd;
}
header, footer {
    height: 200px;
}
div[role=main] {
    height: 2000px;
}
aside {
    padding: 20px;
    float: right;
}

JavaScript

var main = $('div[role=main]').outerHeight();
var posicaoFooter = $('footer').offset().top;
var sidebarDiv = $('aside');

$(window).on('scroll', function () {
    var scroll = $(this).scrollTop();
    if (scroll + sidebarDiv.outerHeight() < main) sidebarDiv.css('margin-top', scroll);
});