<aside class="timeline__legend">
    <div>
    <label for="legend__past">Past</label>
    <div id="legend__past">
        <button id="past-unpaid" class="legend__button"><p><span class="colour-square colour-square--unpaid-past"></span> Unpaid</p></button>
        <button id="past-paid" class="legend__button"><p><span class="colour-square colour-square--paid-past"></span> Paid</p></button>
    </div>
    </div>
    <div>
    <label for="legend__current">Current</label>
    <div id="legend__current">
        <button id="current-unpaid" class="legend__button"><p><span class="colour-square colour-square--unpaid-current"></span> Unpaid</p></button>
        <button id="current-paid" class="legend__button"><p><span class="colour-square colour-square--paid-current"></span> Paid</p></button>
    </div>
    </div>
</aside>