Today, when I was working, I came across a scenario where I had to design something like this:
Naturally, my go-to option is to write the heading and float the edit button to the right. If you aren't new to web development, you would have guessed that the edit button wouldn't align with the heading and would be placed along the bottom of the heading.
To fix this, I usually move the edit button before the heading in the html
<button type="button" onclick="edit()" style="float: right">Edit</button>
<h1>Blog</h1>
Wait, this is all fine and dandy, but, haven't I broken the layout for screen readers? A quick google search revealed that it is indeed bad to do float: right. The ChromeVox extension also read out 'Edit' first as expected.
Fortunately, the solution is simple thanks to flexbox. Wrap both the heading and the button in a flex container with justify-content set as space-between
<div style="display: flex; justify-content: space-between;">
<h1>Blog</h1>
<button type="button" onclick="edit()">Edit</button>
</div>