JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="header">
        <div id="one"></div>
        <div id="two"></div>
        <div id="tree"></div>
        <div id="four"></div>       
   </div>
          
</body>

CSS

#header{
        background-color:#252323;
        margin: 0 auto 0;
        max-width: 700px;
        height: 60px;
    }
    #header:before{
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        content: "";
    }

    #one{
        display: inline-block;
        width:150px;
        height: 20px;
        background-color: red;
        float:left;
        vertical-align: middle;
    }

    #two{
      display: inline-block;
      width: 150px;
      height: 20px;
      float:left;
      background-color: green;
      vertical-align: middle;
    }

    #tree{
      display: inline-block;
      width: 150px;
      height: 20px;
      float:left;
      background-color: black;
      vertical-align: middle;
  }

  #four{
    display: inline-block;
    width: 150px;
    height: 20px;
    float:right;
    background-color: blue;
    vertical-align: middle;
  }