JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

.B {
  height:100px;
}
.B2 {
  background-color: red;
  height: 100px;
  width: 100px;
  float: left;
}
.B2-wrap {
	position: relative;
    float: left;
}
.C {
  float: left;
}
.D {
  height: 40px;
  width: 40px;
  float:left;
  background-color: yellow;
}
.E {
  height: 50px;
  width: 10px;
  position: absolute;
  right: 0px;
  background-color: black;
}