<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content is short</p>
  </div>
  <div class="card">
    <h2>Card title</h2>
    <p>Card content is long long long long long long long long long long long long</p>
  </div>
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries#container_query_length_units">Read More</a>
.post {
  display: flex;
  background: #fcf;

  /* A container context based on inline size */
  container-type: inline-size;
}

.card {
  border: 1px solid black;
  margin: 1rem;
  padding: 1rem;
}

/* Apply styles if the container is narrower than 650px */
@container (width < 850px) {
  .card {
    width: 50%;
    background-color: #faf;
    font-size: 4cqi;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.