SO-74219842

by David Thomas

HTML

<main>
  <h3>Heading One</h3>
  <p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
  <h3>Heading Two</h3>
  <p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
  <h3>Heading Three</h3>
  <p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
</main>

CSS

:root {
  --grid-padding-block-start: 0.5em;
  --grid-separator-height: 0.2rem;
}

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 6.4rem;
  grid-row-gap: var(--grid-separator-height);
  position: relative;
}

main > * {
  padding-block: var(--grid-padding-block-start);
}

h3::before {
  content: '';
  width: 100%;
  height: var(--grid-separator-height);
  background-color: #000;
  position: absolute;
  translate: 0 calc(-1 * (100% + var(--grid-padding-block-start)));
}