How to align <button> inline with text?

Question

I was wondering how one would make it so that they could have text followed by a button then more text, all on one line? This is what it might look like:

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

Answer 1

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>
!