To achieve proper alignment in this scenario, it is important to understand the reasons behind misalignment when using the float property.
When the button does not have a float, it aligns perfectly with the heading using inline-block. However, introducing the float property causes the button to detach and shift to the top corner of the block line on the right side of the screen (image attached).
https://i.stack.imgur.com/rCpd5.png
https://i.stack.imgur.com/cHh4u.png
This issue arises because heading tags typically come with default margins.
https://i.stack.imgur.com/W23o3.png
In order to align them correctly,
The first approach is to give the floated button a margin similar to that of the heading.
<div>
<h4 style='display: inline-block;'>Function</h4>
<Button style='float: right; width: 50px; height: 30px; margin: 1.33em'>Test</Button>
</div>
The second method involves wrapping them in a div and utilizing a grid with align-items: center.
<div style='display: grid; grid-template-columns: 1fr 1fr; align-items: center;'>
<h4 style='display: inline-block;'>Function</h4>
<Button style='margin-left: 85%; width: 50px; height: 30px;'>Test</Button>
</div>
The third option is to add left margin to the button in percentage (or vice versa) without using the float property.
<div>
<h4 style='display: inline-block;'>Function</h4>
<Button style='margin-left: 75%;'>Test</Button>
</div>
<div>
<h4 style='display: inline-block; margin-right: 85%;'>Function</h4>
<Button style=''>Test</Button>
</div>
Additionally, consider utilizing flex containers as suggested by other responses for more options.