<div class="warning"><strong>Warning:</strong> Your browser does not support CSS container queries. Please open this demo in Chrome Canary with the experimental <i>#enable-container-queries</i> flag turned on.</div>

<div class="parent-grid">
  <div class="container">
    <div class="card">
      <div class="visual"></div>
      <div>
        <div class="meta">
          <h2>Card Title</h2>
          <h3 class="subtitle">Subtitle</h2>
        </div>
          <p class="desc">Here is some descriptive text. It's optional text to support the main idea of the card, and it will be hidden when this card has less inline space.</p>
        <button>I'm a button</button>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="card">
      <div class="visual"></div>
      <div>
        <div class="meta">
          <h2>Card Title</h2>
          <h3 class="subtitle">Subtitle</h3>
        </div>
          <p class="desc">Here is some descriptive text. It's optional text to support the main idea of the card, and it will be hidden when this card has less inline space.</p>
        <button>I'm a button</button>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="card">
      <div class="visual"></div>
      <div>
        <div class="meta">
          <h2>Card Title</h2>
          <h3 class="subtitle">Subtitle</h2>
        </div>
          <p class="desc">Here is some descriptive text. It's optional text to support the main idea of the card, and it will be hidden when this card has less inline space.</p>
        <button>I'm a button</button>
      </div>
    </div>
  </div>
</div>
body {
  font-family: system-ui, serif;
  padding: 3rem;
}

.container {
  container-type: inline-size;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

// Base Styles
.visual {
  aspect-ratio: 1 / 1;
}

.desc {
  display: none;
}

.card {
  text-align: center;
  padding: 0.5rem;
}

.card h2 {
  font-size: clamp(1.5rem, 15cqi, 3rem);
}

// Responsive Styles

// 2-column grid layout at 350px or wider
@container (min-width: 350px) {
  .card {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
  
  .card h2 {
    font-size: clamp(1.5rem, 15cqi, 2rem);
  }
}

@container (min-width: 500px) {
  .desc {
    display: block;
  }
}

// Parent grid
.parent-grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 30% 1fr 20%;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
View Compiled

External CSS

  1. https://codepen.io/web-dot-dev/pen/54c079f4ba2f7cf20163b8bd89280de2.css

External JavaScript

  1. https://unpkg.com/container-query-polyfill@0.2.3/dist/container-query-polyfill.modern.js