Run-in headers

My site, denisdefreyne.com, used to have run-in headers. Getting them right was not trivial.

HTML:

<div class="run-in">
  <h3 class="run-in__h">Header</h3>
  <p class="run-in__p">Paragraph here.</p>
</div>

I use a Nanoc filter to automatically convert h3 followed by p to an element like this.

CSS:

.run-in {
  margin-top: 3rem;
}
 .run-in__h {
  float: left;

  font-family: var(--font-face-run-in);
  font-weight: 700;
  font-size: var(--font-size-md);

  margin: 0;
  padding: 0 0.75em 0 0;
}

.run-in__h::before {
  content: '';

  padding-right: 0;
}

.run-in__p {
  margin-top: 0;
}