Better CSS for Run-in Headings

Edit 3/18/22: I recently checked several Terms of Use and similar documents and found run-in headings are frequent in this type of document but always incorrectly formatted as <strong> rather than as headings, so this issue appears to be much broader than academia style guides.

I have been wrestling with the format of run-in headings for years. This is not a minor problem, because one of the top styles in academia and scholarly work, APA, requires (APA is strict, not flexible like some style guides) run-in headings for both level 4 and 5 headings (https://apastyle.apa.org/style-grammar-guidelines/paper-format/headings)

Many other academic styles also have run-in headings — for example, Chicago's five heading levels; and Harvard Extension's "C" level headings.

I used to just format run-in headings as bold, but that does not correctly interpret the document structure for assistive technologies. So I now use the CSS below, since display: run-in is not currently a CSS option. The results are glitchy.

For instance, a break appears after the heading when the heading wraps on the browser page. Any suggestions for better code?

H4.enpara {
  text-indent: 2em;
  display: inline-block;
  break-before: column;
  margin-bottom: -1em;
}

H4.enpara + P {
  display: inline;
  margin: 0 0 .7em 0;
}

Solution

@Graham Ritchie's answer seems to work well, but not a fan of the h4 + p + p, h4 + p + h1.... Hopefully this works well for you:

h1, h2, h3, h4, h5 {
  font-size: 1rem;
  font-weight: bold;
}

p {
  text-indent: 2rem;
}

h1 {
  text-align: center;
}

h3, h5 {
  font-style: italic;
}

h4, h5 {
  display: inline;
  margin-inline-start: 2rem;
}

h4 + p, h5 + p {
  display: inline;
  margin-inline-start: 0.5rem;
}

h4 + p::after, h5 + p::after {
  content: "";
  display: block;
  margin: 1rem;
}

<h1>H1 heading</h1>
<p>Text following h1</p>
<h2>H2 heading</h2>
<p>Text following h2</p>
<h3>H3 heading</h3>
<p>Text following h3</p>
<h4>H4 heading</h4>
<p>Text following h4</p>
<p>Text following h4 + p</p>
<h4>H5 heading</h4>
<p>Text following h5</p>
<h5>H5 heading following h5 + p</h5>
<p>Text following h5</p>
<h2>H2 heading following h5 + p</h2>
<p>Text following h2</p>