JSFiddle - React, Tailwind, and code Playground

HTML

<div class="telo">
  <div class="outer">
    <div class="row">
      <div class="break" id="f">1</div>
      <div class="break" id="s">2</div>
    </div>
  </div>  
  <div class="outer">
    <div class="row">
      <div class="break" id="t">3</div>
      <div class="break" id="fo">4</div>
    </div>
  </div>
  <div class="outer">
    <div class="row">
      <div class="break" id="fi">5</div>
      <div class="break" id="si">6</div>
    </div>
  </div>
</div>

CSS

body {
  height: 100%;
  width: 100%;
  padding: 0;
  background: blue;
}

.telo {
  max-width: calc(720px + 2em);
  width: calc(100% - 120px);
  height: 100%;
  background: #eee;
  margin: 0 auto;
}

.break {
  width: 360px;
  display: table-cell;
  margin: 1em 1em 0em 0;
}
.break:nth-child(1){
  margin: 0 1em 0 0;
} 
.break:nth-child(2n){
  margin: 0;
}

#f {
  background: #fa3;
  height: 160px;
}

#s {
  background: #b46;
  height: 180px;
}

#t {
  background: #f9a;
  height: 300px;
}

#fo {
  background: #3cc;
  height: 260px;
}

#fi {
  background: #d7d;
  height: 150px
}

#si {
  background: #af9;
  height: 210px;
}
.row{
  display: table-row;
  margin-bottom: 40px;
 }
.outer{
  margin-bottom: 20px;
}