JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Three.js Scene in a div container</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>


    <div id="table" class="main_table">
      <div id="row1" class="display-row">
        <div id="note" class="cell_fix_note"> </div>
        <div id="canvasContainer" class="cell_grow">
          <canvas id="canvas"> </canvas>
        </div>
        <div id="kfGuiContainer" class="cell_fix_kfGui">
        </div>
      </div>
    </div>

    <div id="table" class="slider_table">
      <div id="row2" class="display-row">
        <div id="sliderContainer" class="cell_fix_slider">
        </div>
      </div>
    </div>

  </body>
  <script src="https://threejs.org/build/three.min.js"></script>

</html>

CSS

html,
body,
div,
canvas {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: linear-gradient( #EAF0F8, #749ACF);
}

.canvas_slider {
  width: 100%;
}

.canvas_kfGui {
  width: 700px;
}

.main_table {
  display: table;
  width: 100%;
  height: 500px;
  margin: 0;
  padding: 0;
}

.slider_table {
  display: table;
  width: 100%;
  height: 300px;
}

.display-row {
  color: black;
  background-color: white;
  display: table-row;
}

.cell_grow {
  display: table-cell;
  background: rgb(81, 255, 0)
}

.cell_fix_note {
  width: 200px;
  display: table-cell;
  vertical-align: middle;
  background: red
}

.cell_fix_kfGui {
  width: 250px;
  display: table-cell;
  vertical-align: middle;
  background: rgb(0, 4, 255);
}

.cell_fix_slider {
  height: 200px;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  background: rgb(255, 136, 0)
}

canvas {
  width: 100%;
  height: 100%;
}

JavaScript

// CREATE CANVAS RIGHT SIZE

canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello Central Canvas", 10, 50);