JSFiddle - React, Tailwind, and code Playground

HTML

<div id="side">
  <div class="side-child">
    <div class="content">
      1
    </div>
  </div>
  <div class="side-child">
        <div class="content">
      2
    </div>
  </div>
  <div class="side-child">
        <div class="content">
      3
    </div>
  </div>
</div>

CSS

#side {
  height : 100vh;
  display : flex;
  flex-direction : column;
  width : 50px;
}

.content {
  width : 100%;
  background : #ff0000;
}

.side-child {
  flex-grow: 1;
  display: flex;
  align-self: stretch;
}