JSFiddle - React, Tailwind, and code Playground

by keithphw

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: 16%;  
  float: left;
  margin: 0.3333%;
} 
.red { 
  background-color: red;        
}    
.orange { 
  background-color: orange;        
}
.yellow { 
  background-color: yellow;        
}
.green { 
  background-color: green;        
}
.blue { 
  background-color: blue;        
}
.purple { 
  background-color: purple;        
}