JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidebar max-height">
  <div class="sidebar-content">
    <div class="sidebar-top"> 
      <div>
          Section 1
      </div>
      <div>        
        Section 2
      </div>          
    </div>

    <div class="sidebar-bottom" ng-style="changePosition()" resize>
      <div class="sidebar-text"><span>Footer Text 1</span></div>
      <div class="sidebar-text"><span>Footer Text 2</span></div>
    </div>
        
  </div>
</div>

CSS

.sidebar {
  position: fixed;
  width: 260px;
  overflow-y: auto;
  border-right: 1px solid #dadada;
  display: inline-block;
  background-color: #ada8ad;
  float: left;
  z-index: 3;

  .sidebar-content {
    position: relative;
    height: 100%;
    width: 100%;
  }
}

.sidebar-top {
    height: 300px
}

.sidebar-bottom {
  bottom: 0px;
  position: absolute;  
}

JavaScript

var app = angular.module('my-angular-app');

// prevent the 'sidebar-bottom’ section from overlapping sidebar entries 
// when window gets resized (to a smaller height)
app.directive('resize', function ($window) {
    return function (scope, element, attr) {

        var w = angular.element($window);
        scope.$watch(function () {
            return {
                'h': window.innerHeight, 
                'w': window.innerWidth
            };
        }, function (newValue, oldValue) {
            scope.changePosition = function () {
                var pos ="";
                if (newValue.h < 440) {
                    pos = "relative"
                } else {
                    pos = "absolute"
                }
                // scope.$eval(attr.notifier);
                return { 
                    'position': pos
                };
            };

        }, true);

        w.bind('resize', function () {
            scope.$apply();
        });
    }
});