JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<title>table</title>
</head>

<body>

<div class="wrapper">
  <div class="header">header</div>
  <div class="left"><a href="#">expand</a><br>left</div>
  <div class="right"><a href="#">expand</a><br>right</div>
  <div class="center"><a href="#">expand</a><br>center</div>
</div>

</body>

</html>

CSS

html, body { margin: 0; padding: 0 }
.wrapper {
  width: 620px;
  margin: 0 auto;
  border: solid 1px black;
}

.center {
  border-left: solid 201px green;
  border-right: solid 201px yellow; 
  background: silver;
}

а.center:after {
  clear: both;
  content: ".";
  display: block;
  height: 0px;
  visibility: hidden;}

.left, .right { width: 200px }
.left {float: left}
.right {float: right}

.header {
  height: 100px;
  background: #db0000;
}

a:hover {height: 550px; display: block;}

JavaScript

*