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 class="container">
    <div class="row">
        <div class="col-sm-12">Footer</div>
    </div>
</footer>

CSS

body > * {
    border: 1px solid #ccd;
}
header, footer {
    height: 200px;
}
div[role=main] {
    height: 2000px;
}
aside > section {
    position: absolute;
}

JavaScript

$('aside > section').affix({
  offset: {
    top: 0,
    bottom: function () {
      return (this.bottom = $('footer').outerHeight(true))
    }
  }
})