JSFiddle - React, Tailwind, and code Playground

by MinusFour

HTML

<div class="outer">
  <div class="left">
  </div>
  <div class="right">
    <div class="top">
    </div>
    <div class="bottom">
    </div>
  </div>
</div>

CSS

.outer {
  display: flex;
  min-height: 200px;
}
 
.left {
  background: brown;
  flex: 1;
}
 
.right {
  display: flex;
  flex-direction: column;
  flex: 3;
}
 
.top {
  background: green;
  flex: 1;
}
 
.bottom {
  background: yellow;
  flex: 1;
}