JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="child-static-left"></div>
    <div class="child"></div>
    <div class="child-static-right"></div>
    <div class="child-static-left"></div>
    <div class="child"></div>
    <div class="child-static-right"></div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

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

div.parent {
    border: 1px solid grey;
    width: 60%;
    height: 60%;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
}

div.child-static-left {
    border: 1px solid grey;
    width: 50px;
    height: 30%;
    margin-right: 10px;
}

div.child-static-right {
    border: 1px solid grey;
    width: 50px;
    height: 30%;
    margin-left: 10px;
}

div.child {
    border: 1px solid grey;
    width: calc(100% - 120px);
    height: 30%;
}