JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="wrapper">
  <div class="topRight">TopRight<br>variable height</div>
  <div class="bottomright">Bottom</div>
  
  <div class="left">Left</div>
  </div>

CSS

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 100px;
}
/* variable height div */   
.topRight {
  flex: 1;
  background-color: yellow;
}

.bottomright {
  /*flex: 1;*/ /* consumes remaining space in column */
  background-color: red;
}

.left {
  flex: 0 0 100%; /* consumes full height of first column; forces siblings to wrap */
  background-color: lightgreen;
}