<div class="my-cool-component">
  <style>
    @scope {
      :scope {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        padding: 1rem;
        border: 1px solid black;
      }
      .card {
        padding: 1rem;
        border: 1px solid black;
        background: lightgray;
        h2 {
          margin: 0 0 1rem 0;
        }
      }
    }
  </style>

  <article class="card">
    <h2>Lorem ipsum dolor sit amet.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum reiciendis exercitationem excepturi dolor consequatur cum alias, nemo optio delectus, omnis quos nulla animi necessitatibus, voluptatum eos soluta ratione! Eius, a?</p>
  </article>
  <article class="card">
    <h2>Lorem ipsum dolor sit amet.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum reiciendis exercitationem excepturi dolor consequatur cum alias, nemo optio delectus, omnis quos nulla animi necessitatibus, voluptatum eos soluta ratione! Eius, a?</p>
  </article>
</div>

<article class="card">
  <h2>Lorem ipsum dolor sit amet.</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum reiciendis exercitationem excepturi dolor consequatur cum alias, nemo optio delectus, omnis quos nulla animi necessitatibus, voluptatum eos soluta ratione! Eius, a?</p>
</article>

body {
  height: 100vh;
  margin: 0;
  padding: 2rem;
  display: grid;
  place-items: center;
}
html {
  font: 100%/1.3 system-ui;
}