How to move a heading inline? - html

Question

I want to emulate this design of having "titles" on paragraphs in HTML/CSS.
Semantically, these "titles" should be headings. Is there a way to achieve this for paragraphs and list-items in CSS? My best idea is to declare the paragraph/list-item after such a heading to display in-line, but that creates weird spacing issues: because I'm declaring a paragraph after a heading to display inline and the not clear the heading, if the previous paragraph is short it will move to merge with that previous paragraph. And for list-items, the inter-item spacing (margin) is no longer respected.
h4 {
clear: both;
float: left;
display: inline;
font-weight: 600;
margin: 0;
}
h4::after {
content: "\2006\00B7\2006";
}
h4+p,
h4+li {
display: inline;
margin: 1em 0 1em 0;
}
p,
ul,
li {
clear: both;
margin: 2em 0 2em 0;
}
<h4> Paragraph Heading </h4>
<p> Lorem ipsum dolor sit amet </p>
<h4> The Next Paragraph Heading </h4>
<p> Because the last paragraph was too short, this gets moved up; bummer. </p>
<p> Maecenas hendrerit nibh auctor odio interdum, eget dictum felis pulvinar. Nulla mollis sem convallis lorem aliquet scelerisque. Vestibulum auctor ac metus nec varius. Cras sed tortor pharetra, ullamcorper tortor non, euismod turpis. Sed quis scelerisque
ante, gravida finibus massa. Integer elementum eget sapien ac iaculis. Cras tincidunt auctor lacus, rhoncus mattis metus tincidunt sed. Phasellus molestie nunc sit amet sapien viverra iaculis. Aenean aliquam felis sed blandit mattis. Donec imperdiet
turpis nisi, ut tincidunt dolor congue a. </p>
<ul>
<h4> List-Item Heading </h4>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus rutrum risus quis sollicitudin. Aenean pharetra, orci ac euismod bibendum, nibh dolor vehicula lorem, vitae rhoncus lectus tellus id ante. Nullam quis magna finibus, pharetra turpis
eu, lobortis risus. Cras semper placerat nisl, id consequat metus sodales eget. Etiam tincidunt justo consectetur tristique egestas. Ut sed venenatis elit. Sed ligula lacus, molestie maximus nisl eget, auctor interdum velit. Etiam condimentum faucibus
viverra. Curabitur interdum sem arcu, quis iaculis magna sodales at. Proin tristique viverra tortor dictum convallis. </li>
<h4> List-Item Heading </h4>
<li> The list-item spacing is wonky here.</li>
</ul>

Answer 1

You can get most of the way there just by making h4 and p have display: inline;, removing the margin on h4, and adding a block-level non-breaking space after the paragraph.
li elements take care of themselves once you move the h4 element within them.
p::after {
content: "\00A0";
display: block;
}
h4, p {
display: inline;
margin: 0;
}
h4 {
font-weight: 600;
margin: 0;
}
h4::after {
content: "\2006\00B7\2006";
}
<h4> Paragraph Heading </h4>
<p> Lorem ipsum dolor sit amet </p>
<h4> The Next Paragraph Heading </h4>
<p> Because the last paragraph was too short, this gets moved up; bummer. </p>
<p> Maecenas hendrerit nibh auctor odio interdum, eget dictum felis pulvinar. Nulla mollis sem convallis lorem aliquet scelerisque. Vestibulum auctor ac metus nec varius. Cras sed tortor pharetra, ullamcorper tortor non, euismod turpis. Sed quis scelerisque
ante, gravida finibus massa. Integer elementum eget sapien ac iaculis. Cras tincidunt auctor lacus, rhoncus mattis metus tincidunt sed. Phasellus molestie nunc sit amet sapien viverra iaculis. Aenean aliquam felis sed blandit mattis. Donec imperdiet
turpis nisi, ut tincidunt dolor congue a. </p>
<ul>
<li> <h4> List-Item Heading </h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus rutrum risus quis sollicitudin. Aenean pharetra, orci ac euismod bibendum, nibh dolor vehicula lorem, vitae rhoncus lectus tellus id ante. Nullam quis magna finibus, pharetra turpis
eu, lobortis risus. Cras semper placerat nisl, id consequat metus sodales eget. Etiam tincidunt justo consectetur tristique egestas. Ut sed venenatis elit. Sed ligula lacus, molestie maximus nisl eget, auctor interdum velit. Etiam condimentum faucibus
viverra. Curabitur interdum sem arcu, quis iaculis magna sodales at. Proin tristique viverra tortor dictum convallis. </li>
<li><h4> List-Item Heading </h4> The list-item spacing is wonky here.</li>
</ul>