JSFiddle - React, Tailwind, and code Playground

HTML

<div class="A border">
  <div class="B border">
    <div class="F border">
        F
    </div>
  </div>
  <div class="C border">
    C
  </div>
  <div class="E border">
    E
  </div>
  <div class="D border">
    D
  </div>
  
</div>

CSS

* {
  box-sizing: border-box;
}
.border {
  border-style: solid;
  border-width: 1px 1px 1px 1px;
 }
  .A {
    height: 200px;
    width: 200px;
  }
  .B {
    float: left;
    width: 35%;
    height:75%;
  }
  .C {
    float: left;
    width: 35%;
    height: 75%;
    min-height: 100px;
    max-height: 250px;
    background: green;
  }
  .D{
    float: left;
    width: 70%;
    height: 25%;
    min-height: 25px;
    max-height: 50px;
    background: blue;
}

.E {
    float:right;
    height:85%;
    width:30%;
    background:red;
    min-height:175px;
    max-height:200px;
}

.F {
    width:100%;
    height:100%;
    max-height:200px;
    min-height:100px;
    background:yellow;
}