<div class="card">
  <h2>Lorem ipsum dolor sit.</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse voluptas officiis qui harum totam fuga ducimus quidem quas modi impedit dolor doloribus architecto rerum est ipsam ab molestias, hic aperiam.</p>
</div>
<div class="card">
  <h2>Lorem ipsum dolor sit.</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse voluptas officiis qui harum totam fuga ducimus quidem quas modi impedit dolor doloribus architecto rerum est ipsam ab molestias, hic aperiam.</p>
</div>
<div class="card">
  <h2>Lorem ipsum dolor sit.</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse voluptas officiis qui harum totam fuga ducimus quidem quas modi impedit dolor doloribus architecto rerum est ipsam ab molestias, hic aperiam.</p>
</div>
<div class="card">
  <h2>Lorem ipsum dolor sit.</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse voluptas officiis qui harum totam fuga ducimus quidem quas modi impedit dolor doloribus architecto rerum est ipsam ab molestias, hic aperiam.</p>
</div>
@use postcss-px-to-viewport(
  viewportUnit: vw,
  viewportWidth: 1200
);

body {
  box-sizing: border-box;
  height: 100vh;
  margin: 0;
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  place-content: center;
  font-family: system-ui;
  background: #ccc;
}

.card {
  font-size: 23px;
  background: white;
  padding: 30px;
  border-radius: 20px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.