Have group of buttons on same row but separate their alignments - html

Question

I have a simple div that contains a few anchor tags and a button. I want the first three anchor tags to be aligned to the left, and the button to be aligned to the right. But I want them to be all on the same row. My example shows all four elements to the right. How can I achieve that? Thanks
Please see
My example
I just want the first three buttons to the left of the page and the last one to the right. However, I want to keep them aligned and on same row.

Answer 1

You can use flexbox for that, there are many ways, one of them is the following :
.extra-buttons {
display: flex;
margin-bottom: 5px;
}
button {
margin-left: auto;
}
Another (cleaner) way would be to wrap your links in a div and apply justify-content: space-between on the .extra-buttons:
HTML:
<div class="extra-buttons">
<!-- How do I align these three anchor tags to the left -->
<div>
<a class="btn">
<span class="glyphicon glyphicon-refresh"></span> Refresh
</a>
<a class="btn">
<span class="glyphicon glyphicon-print"></span> Print
</a>
<a class="btn">
<span class="glyphicon glyphicon-plus"></span> Add
</a>
</div>
<!-- But keep this at the right (end) -->
<button>Reset</button>
</div>
CSS:
.extra-buttons {
display: flex;
justify-content : space-between
margin-bottom: 5px;
}