JSFiddle - React, Tailwind, and code Playground

by Uncle Bens

HTML

<div class="wrapper">
  <div class="block six"></div>
  <div class="block six"></div>
  <div class="block six"></div>
  <div class="block six"></div>
  <div class="block six"></div>
  <div class="block six"></div>
  
  <div class="block four first-four"></div>
  <div class="block four"></div>
  <div class="block four"></div>
  <div class="block four"></div>
</div>

CSS

.wrapper {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  border: 1px solid black;
}
.block {
  border-left: 1px solid black;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.six {
  border-bottom: 1px solid black;
  width: 16.66%;
  height: 50px;
}
.four {
  width: 25%;
  height: 200px;
}
.six:first-child {
  border-left: 0px;
}
.first-four {
  border-left: none;
}