JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="left">
    left section
  </div>
  <div class="middle">
    middle section
    <div class="fixed-footer">
      fixed footer section
    </div>
  </div>
  <div class="right">
    right section
  </div>
</div>

CSS

.container {
  display: flex;
  color: #fff;
}

.left {
  background: blue;
  min-height: 100vh;
  width: 150px;
  flex-shrink: 0;
}

.middle {
  background: green;
  min-height: 100vh;
  flex-grow: 1;
  flex-shrink: 0;
  /*width: 500px; works but not helpful */
  /*width: auto; nope */
  /*width: 100%; nope */
}

.middle .fixed-footer {
  background: orange;
  position: fixed;
  bottom: 0;
  width: inherit;
  padding: 16px 0;
}

.right {
  background: blue;
  min-height: 100vh;
  width: 250px;
  flex-shrink: 0;
}