JSFiddle - React, Tailwind, and code Playground

by MarkKramer

HTML

<div id="container">
    <div id="top-section">
      STRETCHES ALL THE WAY
    </div>
    <div id="middle-left-section">
      FIXED AT 300PX
    </div>
    <div id="middle-right-section">
      STRETCHES ALL THE WAY, AND DOESN'T GO SMALLER THAN 400 PIXELS -------------------------------------------------------------------
    </div>
    <div id="bottom-section">
      STRETCHES ALL THE WAY
    </div>
  </div>

CSS

#top-section {
      background-color: red;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 200px;
    }
    #middle-left-section {
      background-color: orange;
      position: absolute;
      top: 200px;
      left: 0;
      width: 300px;
      bottom: 60px;
    }
    #middle-right-section {
      background-color: blue;
      position: absolute;
      top: 200px;
      right: 0;
      left: 300px;
      bottom: 60px;
      min-width: 400px;
    }
    #bottom-section {
      background-color: green;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
    }