JSFiddle - React, Tailwind, and code Playground

HTML

<div class="boxed">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>

</div>

CSS

.boxed {
  width:800px;
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-flow: row wrap;
}

.boxed div {
  height:50px;
  margin:4px;
  background:#f5f5f5;
  flex:auto;
  width:300px;
}

.boxed div:nth-child(6n + 1), .boxed div:nth-child(6n + 6) {
  background:salmon;
  height:108px;
  width:60%;
}