JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Пример</title>
    <meta charset="utf-8">
    </head> 
<body>
<div class="container">
    <div class="left"></div>
    <div class="grouper">
        <div class="num1"></div>
        <div class="num2"></div>
    </div>
    <div class="num3"></div>
    <div class="right"></div>
</div>    
</body>
</html>

CSS

body
{
    margin: 0px;
    padding: 0px;
    background-color: lightgray;
}    
.container
{
    min-width: 300px;
    max-width: 1000px;
    height: 500px;
    margin: auto;    
    border: 1px solid black;
    background-color: white;
    position: relative;
}
.left
{
    width: 100px;
    height: 100%;
    border: 1px solid black;
    background-color: lightgreen;
    left: 0px;
    position: absolute;
}
.right
{
    width: 100px;
    height: 100%;
    border: 1px solid black;
    background-color: lightgreen;
    right: 0px;
    position: absolute;
}
.grouper
{
    min-width: 100px;
    max-width: 800px;
    height: 50%;
    left: 33%;
    right: 33%;
    position: absolute;    
}
.num1
{
    width: 50px;
    height: 100%;
    border: 1px solid black;
    background-color: lightgreen;
    left: 0px;
    position: absolute;    
}
.num2
{
    width: 50px;
    height: 100%;
    border: 1px solid black;
    right: 0px;
    background-color: lightgreen;    
    position: absolute;    
}
.num3
{
    width: 100px;
    height: 50%;
    border: 1px solid black;
    background-color: lightgreen;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    position: absolute;
}