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

var camera, scene, renderer, canvasRender;
var mesh;
init();
animate();
function init() {
    canvasRender = document.getElementById("canvas");
    camera = new THREE.PerspectiveCamera( 70, canvasRender.offsetWidth / 			     canvasRender.offsetHeight, 1, 1000 );
    camera.position.z = 400;
    scene = new THREE.Scene();
    var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
    mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
    scene.add( mesh );
    renderer = new THREE.WebGLRenderer( {canvas: canvasRender, antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( canvasRender.offsetWidth, canvasRender.offsetHeight );

    window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
    camera.aspect = canvasRender.offsetWidth / canvasRender.offsetHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( canvasRender.offsetWidth, canvasRender.offsetHeight );
}
function animate() {
    requestAnimationFrame( animate );
    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;
    renderer.render( scene, camera );
}