JSFiddle - React, Tailwind, and code Playground

by j08691

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: 14%;
    display: inline-block;
    margin: 1%;
    float:left;
}
.red {
    background-color: red;
}
.orange {
    background-color: orange;
}
.yellow {
    background-color: yellow;
}
.green {
    background-color: green;
}
.blue {
    background-color: blue;
}
.purple {
    background-color: purple;
}