JSFiddle - React, Tailwind, and code Playground

HTML

<body>
      <div id='box'>
        <div class='row'>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
        </div>
        <div class='row'>
          <div class='long-cell'></div>
          <div class='cell'></div>
        </div>
      </div>     
    </body>

CSS

body{
  background: purple;
}
#box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;
}
.row {
  background: gray;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  width: 800px;
}
.long-cell,
.cell{
  height: 200px;
  background: white;
  margin:7.5px;
}
.cell{
  flex-basis: calc(33.3% - 15px);
}
.long-cell{
  flex-basis: calc(66.6% - 15px);
}