JSFiddle - React, Tailwind, and code Playground

by ojtramp

HTML

<h4>
Example One
</h4>

 <div class="bar">
 
     <div class="title">
         Sort Options:
     </div>
 
     <div class="sort_buttons">
         <div class="sort_btn">size</div>
         <div class="sort_btn">size</div>
         <div class="sort_btn">size</div>
      </div>
      
</div> 


<hr>

<h4>
Example Two
</h4>

<div class="bar">
 
     <div class="sort_buttons">
         <div class="sort_btn">size</div>
         <div class="sort_btn">size</div>
         <div class="sort_btn">size</div>
      </div>
      
      
</div> 

<hr>

<h4>
Example Three
</h4>

<div class="bar">
 
     <div class="sort_buttons">
         <div class="sort_btn">size</div>
         <div class="sort_btn">size</div>
         <div class="sort_btn">size</div>
         <div class="sort_btn">size</div>
         <div class="sort_btn">size</div>
      </div>
      
      
</div>

CSS

.bar {
  display: flex;
}
 
.sort_buttons {
  display:flex;
  flex: 1;
}

.sort_btn  {
  margin:auto;
  width:auto 
}

hr {
  margin-top: 30px;
}