JSFiddle - React, Tailwind, and code Playground

by bergb

HTML

<div class="main-container">
  <div class="inner-container">
    <div class="sticky">sticky child</div>
    <div class="non-sticky">non-sticky child</div>
  </div>
</div>

CSS

.inner-container {
  
}

.sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 30px;
  
}

.non-sticky {
  background-color: blue;
  width: 100%;
  flex-grow: 5;
  flex-shrink: 5;
}

.main-container {
  
}

.inner-container {
  height: 300px;
}