How to align <button> inline with text?

Give them a float: left

h3, button{
    float: left;
    margin: 0;
}

https://jsfiddle.net/n79gwgqk/

All heading tags such as <h3> are block-level, and a block-level element occupies the entire space of its parent element (container). You can reset it to display: inline, display: inline-block (recommend), display: inline-table, or even using flexbox, float etc., there are many ways.

If you can modify the markup, I suggest not to use <h3> for semantic reason, just use <span> tags or plain text would be a better choice.

h3 {
  display: inline-block;
  margin: 0;
}

<h3>Some</h3>
<button>Text</button>
<h3>!</h3>

<hr>

<span>Some</span>
<button>Text</button>
<span>!</span>

<hr>

Some
<button>Text</button>
!

As I know H3 element can contains other markup elements. Simply inline button in H3 text

<h3>Hello&nbsp;<button>Say Hello</button>&nbsp;World</h3>