JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Sign up</title>
	</head>
	<body>
		<div id="container">
      <div class="side">
        
      </div>
      <div class="square">
        
      </div>
      <div class="side">
        
      </div>
    </div>
    <script>
      function resizeContainerComponents(){
      	var containerWidth = document.getElementById("container").clientWidth;
      	Array.from(document.getElementsByClassName("square")).forEach(
    			function(element, index, array){
        	  element.style.width = element.clientHeight + "px";
    			}
				);
       	Array.from(document.getElementsByClassName("side")).forEach(
    			function(element, index, array){
        	  element.style.width = ((containerWidth - element.clientHeight) / 2) + "px";
    			}
				);
      }
      resizeContainerComponents();
      window.onresize = function(){
      	resizeContainerComponents();
      };
    </script>
	</body>
</html>

CSS

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
}

#container{
  width: 58%;
  height: 58%;
  display: flex;
  
}

.side{
  height: 100%;
  background: grey;
}

.square{
  height: 100%;
  background: lightblue;
}