JSFiddle - React, Tailwind, and code Playground

HTML

<h4>Section</h4>

<h5>Heading</h5>
<p>Paragraph here. This is some text to fill out the line and make it wrap, so you can get a feel for how a heading with <code>display: run-in;</code> might look.</p>

<h5>Heading followed by another heading</h5>

<h6><div>Subheading</div></h6>
<p>There should be as much space between the &lt;h5> and &lt;h6> as there is between the &lt;h4> and &lt;h5>, but it gets “collapsed” because the &lt;h5> floats.</p>

<h5>Heading followed by a list</h5>
<ul><li>A list item</li></ul>

CSS

/* Just some basic styles to start off */
body { line-height: 1.5; }
h4,h5,h6 { font-size: 1em; margin: 1em 0; }
h4 { background: #fee; }
h5 { background: #eef; }
h6 { background: #dfd; font-style: italic; font-weight: normal; }

/* Now let’s try to emulate `display: run-in`... */
h4,h5,h6 {
    clear: both;
}
h5 {
    float: left;
    display: run-in;
    margin: 0 1em 0 0;
}