JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="column">
  <div class="row">50%</div>
  <div class="row row-2">50%</div>
</div>
<div class="column">
  <div class="row">33,3%</div>
  <div class="row">33,3%</div>
  <div class="row">33,3%</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.content {
  display: flex;
}
.content > div {
  margin: 10px;
  background: green;
}


.column {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin: 0 auto;
}

.row {
    /*flex: 1;*/
    flex-grow: 1;
    flex-basis: 30.6%;
    width: 30.6%;
    color: #fff;
    padding: 10px;
    /*margin: 10px 0 10px 15px;*/
    margin: 10px 10px;
    text-align: center;
    background-color: #ED5565;
    border-bottom: 3px solid #BF263C;
    border-radius: 3px;
}
.row-2 {
  flex-basis: 64%;
  width: 64%;
}