JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<section>
  <article>
    <h1>Heading 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
  <article>
    <h1>Heading 1</h1>
    <h2>Heading 2 (:has)</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
  <article>
    <h1>Heading 1</h1>
    <h2 class="without-has">Heading 2 (without :has)</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
</section>

CSS

* {
  font-family: sans-serif;
}
h1 {
  font-size: 1.8rem;
}
h2 {
  font-size: 1.2rem;
  color: gray;
}
section {
  display: flex;
}
article {
  padding: 2rem;
}

h1, h2 {
  margin: 0 0 1.5rem 0;
}

h1:has(+ h2) {
  margin: 0 0 .25rem 0;
}

h1:has(+ h2.without-has) {
  margin: 0 0 1.5rem 0;
}