JSFiddle - React, Tailwind, and code Playground

HTML

<h4>The goal</h4>
<p>Get all the boxes to fit on one line, with equal width.</p>

<div class="container"><div class="inner red">&nbsp;</div><div class="inner orange">&nbsp;</div><div class="inner yellow">&nbsp;</div><div class="inner green">&nbsp;</div><div class="inner blue">&nbsp;</div><div class="inner purple">&nbsp;</div>
    <!-- Plus arbitrarily many more boxes... -->
</div>

CSS

div { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}

.container { 
  width: 100%;
}

.inner { 
  width: 18%;  
  float: left;
  margin: 1px;
}

.red { 
  background-color: red;        
}

.orange { 
  background-color: orange;        
}

.yellow { 
  background-color: yellow;        
}

.green { 
  background-color: green;        
}

.blue { 
  background-color: blue;        
}

.purple { 
  background-color: purple;        
}