JSFiddle - React, Tailwind, and code Playground

by Sergey Goryachev

HTML

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

CSS

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

.leftwrap {
  float: left;
}
.rightwrap {
  float: right;
}
.left {
  display: inline-block;
  vertical-align: middle;
}

.right {
  display: inline-block;
  vertical-align: middle;
}

#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;
}