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 class="content">
          slkadjaklsjdklasjd
        </div>
        <svg viewbox="0 0 100 100"></svg>
      </div>
      <div class="side">
        
      </div>
    </div>
	</body>
</html>

CSS

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

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

.side{
  height: 100%;
  background: grey;
  flex-grow: 1;
}

.square{
  height: 100%;
  background: lightblue;
  position: relative;
  
}
.square .content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.square svg {
  height: 100%;
}