JSFiddle - React, Tailwind, and code Playground

by Ebram

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>
<div style="clear:both;"></div>

CSS

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container {
    width: 100%;
}
.inner {
    /*width: 16%;*/
    width: 15%;
    /*display: inline-block;*/
    float:left;
    /*margin: 1px;*/
    margin: 0.5px;
}
.red {
    background-color: red;
}
.orange {
    background-color: orange;
}
.yellow {
    background-color: yellow;
}
.green {
    background-color: green;
}
.blue {
    background-color: blue;
}
.purple {
    background-color: purple;
}