JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header" class="block">
                <div id="pe" class="text">
                  <b>Name :</b> <span>King</span><br />
                  <b>Surname :</b> <span>Kong</span>
                </div>
                <div id="area" class="text">
                  <span id="city">Abcs</span><b>/</b>
                  <span id="state">Bcsdf</span>
                </div>
              </div>

CSS

.block{
      width:540px;
      margin:20px;
     padding:10px;
      border:1px solid Gray;
     overflow:hidden;
}

 #pe
 {
  float:left;
 }
 #area
 {
   float:right;
 }