JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="type-a">A</div>
  <div class="type-b">B</div>
  <div class="type-c">C</div>
  <div class="type-c">C</div>
  <div class="type-b">B</div>
  <div class="type-b">B</div>
  <div class="type-c">C</div>
  <div class="type-a">A</div>
</div>

CSS

[class^="type"] {
  width: 20px;
  height: 20px;
  background-color: yellow;
}

.type-a, .type-b {
  float: left;
}

.type-c {
  float: right;
}

.container {
  display: inline-block;
}