JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blue">
   <div class="yellow1">
     <p>999999<br>100<br>200</p>
   </div>
   <div class="yellow2">
     <p>100<br>200</p>
   </div>
   <div class="yellow3">
     <p>1000</p>
   </div>
</div>

CSS

body {
  line-height: 20px;
}
.blue {
  padding: 10px;
  background-color: #d7e1fd;
 }
.yellow1 { 
  display: inline-block;
  padding: 0 10px 0 10px;
  background-color: #fefa8f;
  border: 1px solid #44464b;
  vertical-align: middle;
}
.yellow2 { 
  display: inline-block;
  padding: 0 10px 0 10px;
  background-color: #fefa8f;
  border: 1px solid #44464b;
  margin-left: 7px;
  vertical-align: top;
}
.yellow3 { 
  display: inline-block;
  padding: 0 10px 0 10px;
  background-color: #fefa8f;
  border: 1px solid #44464b;
  margin-left: 7px;
  vertical-align: bottom;
}