JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<div class="container">
  <div class="left-block">
  left
  </div>
  <div class="center-block">
  To position an element "fixed" relative to a parent element, you want position:absolute on the child element, and any position mode other than the default or static on your parent element. This will position childDiv element 50 pixels left and 20 pixels down relative to parentDiv's position.
  </div>
  <div class="right-block">
  right
  </div>
</div>

CSS

*{
  padding: 0;
  margin: 0;
}
.container{
  position: relative;
  padding: 0 120px;
  max-width: 800px;
  margin: auto;
  border: solid 1px black;
  display: flex;
}
.left-block{
  width: 100px;
  background-color: blue;
  position: sticky;
  left: 0;
  top: 0;
  height: 100vh;
}
.center-block{
  flex: 1;
  height: 3000px;
  padding: 10px;
  background-color: orange;
}
.right-block{
  width: 100px;
  background-color: red;
  position: sticky;
  right: 0;
  top: 0;
  height: 100vh;
}