JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <ul class="hr">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

CSS

.box {
  width: 200px;
  border: 2px solid #000000;
  justify-content: space-between;
  
}

ul.hr {
    
    padding: 4px; 
    justify-content: space-between;
   }
   ul.hr li {
    display: inline; 
    margin-right: 5px;
    border: 1px solid #000;
    padding: 3px;
   }