JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
   <div class="big"> I AM BIG 2</div>
    <div class="big"> I AM BIG 3</div>
     <div class="big"> I AM BIG 4</div>
     <div class="small"> I AM SMALL 2 </div>
</div>

CSS

.container {
  padding: 10px;
  border: 1px solid red;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.big {
 width: calc(60% - 22px);
 padding: 10px;
 background: lime;
 height: 100px;
 margin-bottom: 10px;
 }

.small {
  width: calc(40% - 22px);
  height: 100px;
  padding: 10px;
  background: orange;
  margin-bottom: 10px;
}