JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<!-- in case we add more info later below game, encase the game itself in a section -->
	<section id="gameSection">
		<div id="leftPanel">Left Panel.</div>
		<div id="centerPanel">Center Panel.</div>
		<div id="rightPanel">Right Panel.</div>
	</section>

CSS

* {
			vertical-align: baseline;
			font-weight: inherit;
			font-family: inherit;
			font-style: inherit;
			font-size: 100%;
			border: 0 none;
			outline: 0;
			padding: 0;
			margin: 0;
		}
		
		#gameSection {
			white-space: nowrap;
			overflow-x: hidden;
			overflow-y: hidden;
		}
		
		
		#leftPanel, #centerPanel, #rightPanel {
			display: inline-block;
		}
		
		#leftPanel {
			background-color: #6495ed;
		}
		
		#centerPanel {
			background-color: #e0ffff;
		}
		
		#rightPanel {
			background-color: #b0c4de;
		}

JavaScript

function resize() {
			var MIN_GAME_WIDTH = 800;
			var MIN_GAME_HEIGHT = 450;
			var GAME_ASPECT_RATIO = 16 / 9;
		
			var width = window.innerWidth;
			var height = window.innerHeight;
						
			var gWidth, gHeight;
			
			if(width < MIN_GAME_WIDTH || height < MIN_GAME_HEIGHT) {
				gWidth = MIN_GAME_WIDTH;
				gHeight = MIN_GAME_HEIGHT;
			}
			else if ((width / height) > GAME_ASPECT_RATIO) {
				// width is too large for height
				gHeight = height;
				gWidth = height * GAME_ASPECT_RATIO;
			}
			else {
				//  height is too large for width
				gWidth = width;
				gHeight = width / GAME_ASPECT_RATIO;
			}
			
			resizeGame(gWidth, gHeight, GAME_ASPECT_RATIO);
}
    
resize();

		function resizeGame(gWidth, gHeight, aspectRatio) {
            gWidth += "px";
            gHeight += "px";
            
			var gSection = document.getElementById("gameSection");
			var lPanel = document.getElementById("leftPanel");
			var cPanel = document.getElementById("centerPanel");
			var rPanel = document.getElementById("rightPanel");
            
            gSection.className = 'wide';
            
			gSection.style.height = gHeight;
			gSection.style.width = gWidth;

			// should the below be taken care of in the CSS?
			lPanel.style.height = gHeight;
			cPanel.style.height = gHeight;
			rPanel.style.height = gHeight;
			
			cPanel.style.width = gHeight;
			lPanel.style.width = (gWidth - gHeight) / 2;
			rPanel.style.width = lPanel.style.width;
		}
            
            window.onresize = resize;