JSFiddle - React, Tailwind, and code Playground

by RedEagle69

HTML

<div class="box">
  <div class="red">
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    
    1<br>
    1<br>
    1<br>
    1<br>
  </div>
  <div class="blue"></div>
  <div class="green"></div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 50vh;
  background-color: #f4f5f8;
}

.red {
  width: 50%;
  background-color: tomato;
}

.blue {
  display: flex;
  align-self: stretch;
  width: 50%;
  min-height: 50%;
  background-color: deepskyblue;
}

.green {
  display: flex;
  align-self: stretch;
  width: 50%;
  min-height: 50%;
  background-color: lime;
}