JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">

  <div id="City2">
    Cities
  </div>

  <div id="City3">
    Cities
  </div>

  <div id="City1">
    Cities
  </div>

  <div id="headerTitle">
    Happy Stores
  </div>

</div>

CSS

#header {
     text-align: center;
   }
   
   #City1 {
     float: left;
   }
   
   #headerTitle {
     display: inline-block;
     background-color: gray;
   }
   
   #City2 {
     float: right;
     padding-left: 5px;
     color: orange;
   }
   
   #City3 {
     float: right;
     background-color: pink;
   }