I have been trying to get three bits of text (styled to look like buttons) to line up left, centre, and right using HTML and CSS, no Flexbox or JS, but without success. How can this be achieved? This is what I need:

[![enter image description here](https://i.stack.imgur.com/lDaFh.gif)](https://i.stack.imgur.com/lDaFh.gif)

Here is my code:

```css
#row1 {padding: 20px 20px 5px 20px;
           overflow: hidden; }

.button-container {display: block; text-align: center;}

.button-left {
    padding: 0 5px;
    text-align: center;
    border: 1px solid;
    float: left;
    font-size: 75%; }

.button-right {
    padding: 0 5px;
    text-align: center;
    border: 1px solid;
    float: right;
    font-size: 75%; }

.button-centre {
    padding: 0 5px;
    text-align: center;
    border: 1px solid;
    font-size: 75%; }
```

```html
<div id="row1">
<div class="button-container">
<span class="button-left"><a href="#1">previous</a></span>
<span class="button-centre"><a href="#2">issue</a></span>
<span class="button-right"><a href="#3">next</a></span>
</div><!--close button-container">
</div><!--close r1-->
```