JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.A {
  background-color: blue;
  height: 200px;
}

.B {
  height:100px;
}
.B2 {
  background-color: red;
  height: 100px;
  width: 100px;
  float: left;
}
.C {
  float: left;
}
.D {
  height: 40px;
  width: 40px;
  float:left;
  background-color: yellow;
}
.E {
  height: 50px;
  width: 10px;
  margin-left: -10px;
  background-color: black;
  float: left;
}