<aside class="timeline__legend">
    <fieldset id="legend__past">
        <legend class="label">Past</legend>

        <button id="past-unpaid" class="button legend__button"><p><span class="colour-square colour-square--unpaid-past"></span> Unpaid</p></button>
        <button id="past-paid" class="button legend__button"><p><span class="colour-square colour-square--paid-past"></span> Paid</p></button>
    </fieldset>
    <fieldset id="legend__current">
        <legend class="label">Current</legend>

        <button id="current-unpaid" class="button legend__button"><p><span class="colour-square colour-square--unpaid-current"></span> Unpaid</p></button>
        <button id="current-paid" class="button legend__button"><p><span class="colour-square colour-square--paid-current"></span> Paid</p></button>
    </fieldset>
</aside>