JSFiddle - React, Tailwind, and code Playground

by kfizzle

HTML

<div>
  <div class="header" >This is the header</div>
  <div class="main-content">
    <div class="column-1"></div>
    <div class="column-2">
      <div class="canvas-column-1">
        <canvas #leftCanvas class="left-canvas" height="200px" width="200px"></canvas>
      </div>
      <div class="canvas-column-2">Canvas Column 2</div>
     
    </div>

  </div>
  <div class="footer" ></div>
</div>

CSS

:root {
  --header-height: 100px;
  --footer-height: 20px;
  --header-background: cornflowerblue;
  --column-1-width: 200px;
}

.header {
  height: var(--header-height);
  min-height: var(--header-height);
  max-height: var(--header-height);
  background-color: var(--header-background);
}

.main-content {
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  min-width: 100vw;
  max-width: 100vh;
  width: 100vw;
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
}

.footer {
  min-height: var(--footer-height);
  max-height: var(--footer-height);
  background-color: var(--header-background);
  position: absolute;
  top: calc(100vh - var(--footer-height));
  left: 0;
  right: 0;
}

.column-1 {
  min-width: var(--column-1-width);
  max-width: var(--column-1-width);
  width: var(--column-1-width);
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  background-color: indianred;
  /* display: none; hidden and does NOT take up space. */
  /* -OR USE- */
  /* visibility: hidden; Hidden but still takes up space. */
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.column-2 {
  min-width: calc(100vw - var(--column-1-width));
  max-width: calc(100vw - var(--column-1-width));
  width: calc(100vw - var(--column-1-width));
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  background-color: blueviolet;
  display: inline-block;
  position: absolute;
  top: 0;
  left: var(--column-1-width);
}

.canvas-column-1 {
  display: inline-block;
  min-width: 50%;
  max-width: 50%;
  width: 50%;

  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  height: calc(100vh -...