JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="left" id="a"></div>
  <div class="left" id="b"></div>
  <div class="right" id="c"></div>
  <div class="right" id="d"></div>
</div>

CSS

.wrap {
  width: 500px;
  height: 75px;
  background: #ccc;
}

.left {
  float: left;
}

.right {
  float: right;
}

#a {
  width: 50px;
  height: 50px;
  background: green;
}

#b {
  width: 75px;
  height: 25px;
  background: red;
}

#c {
  width: 30px;
  height: 20px;
  background: black;
}

#d {
  width: 60px;
  height: 45px;
  background: blue;
}