JSFiddle - React, Tailwind, and code Playground

HTML

<div class="counters">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<div class="action">
    How ready are you to take action?
</div>

<ul class="choices">
    <li>
        <input id="c1" type="checkbox" />
        <label for="c1">Unwilling</label>
    </li>
    <li>
        <input id="c2" type="checkbox" />
        <label for="c2">Not Ready</label>
    </li>
    <li>
        <input id="c3" type="checkbox" />
        <label for="c3">Ready to a point</label>
    </li>
    <li>
        <input id="c4" type="checkbox" />
        <label for="c4">Ready</label>
    </li>
    <li>
        <input id="c5" type="checkbox" />
        <label for="c5">completely Ready</label>
    </li>
</ul>

CSS

div.counters {
    width: 640px;
    display: table;
    background-color: silver;
    padding-left: 4px;
    box-sizing: border-box;
}

div.counters > div {
    float: left;
    width: 20%;
    display: table-cell;
    box-sizing: border-box;
}

div.action {
    color: red;
    margin: 4px 0px;
    width: 640px;
    border-bottom: 1px solid gray;
    box-sizing: border-box;
}

ul.choices {
    width: 640px;
    display: table;
    list-style: none;
    margin: 4px 0px;
    padding: 0px;
    font-size: 13px;
    background-color: silver;
    box-sizing: border-box;
}

ul.choices > li {
    display: table-cell;
    width: 20%;
    box-sizing: border-box;
}