H2 and paragraph, inline?

Question

I know paragraph and headings are block elements, so that's why I'm having a time wrapping my mind around what's the best way to do this accessibility-wise.

Let's say for instance I have copy like this:

*This is the heading.*This is the paragraph, blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

How would my HTML and CSS display this properly?

Answer 1

h2, p {
  display: inline;
}
div.p {
  /* whatever margins/paddings you would normally apply to p */
}

and

<div class="p">
 <h2>This is the heading.</h2>
 <p>This is the paragraph</p>
</div>

You would need to enclose all <p> in a block level element (like <div>) to avoid that consecutive paragraphs collapse.