JSFiddle - React, Tailwind, and code Playground

by Jason Park

HTML

<div class="responsive-container">
   <div class="responsive-container__edge">
   </div>
   
  <div class="responsive-container__content">
    <div>
      Block
    </div>
    
    <div class="sticky-block">
      Sticky<br/>
      Empty!
    </div>
    
    <div style="height: 2000px;">
      Box
    </div>
  </div>
  
  <div class="responsive-container__edge">
  </div>
</div>

CSS

.responsive-container {
  display: flex;
}

.responsive-container__edge {
  flex: 0 0 21px;
  background-color: red;
}

.responsive-container__content {
  flex: 1 1 auto;
  background-color: azure;
}

.sticky-block {
  text-align: center;
  background-color: lightgreen;
  position: sticky;
  top: 0;
}

body {
  height: 100%;
}