JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <div class="vd-grid-left-col">
    <div class="main">
      main
    </div>
    <div class="vd-grid-sub-box">
      sub
    </div>
    <div class="vd-grid-sub-box">
      sub
    </div>
    <div class="vd-grid-sub-box">
      sub
    </div>
  </div>
  <div class="vd-grid-right-col">
    <div class="feature">
      feature
    </div>
    <div class="feature">
      feature
    </div>
  </div>
</div>

CSS

div{
  margin:2px;
}
#app{
  display:flex;
}
.vd-grid-left-col{
  display:flex;
  flex-wrap:wrap;
  flex-basis:70%;
  justify-content:space-between;
}
.main{
  width:100%;
  background-color:blue;
}
.vd-grid-sub-box{
  background-color:red;
  flex-grow:1;
}

.vd-grid-right-col{
  display:flex;
  flex-direction:column;
  flex-basis:30%;
}
.feature{
  width:100%;
  background-color:grey;
}