JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
      <div id="one"></div>
      <div id="two"></div>
      <div id="tree"></div>
      <div id="four"></div>     
    </div>

CSS

#main {
      width: 194px;
    }
    #one {
      display: inline-block;
      width: 23px;
      height: 23px;
      margin-left: 27px;
      background-color: red;
    }
     #two {
      display: inline-block;
      width: 13px;
      height: 23px;
      margin-left: 27px;
      background-color: red;
    }
     #tree {
      display: inline-block;
      width: 25px;
      height: 23px;
      margin-left: 27px;
      background-color: red;
    }
     #four {
      display: inline-block;
      width: 25px;
      height: 23px;
      margin-left: 27px;
      background-color: red;
    }