<div class="page-wrap">
  <resize-asaurus>
    <watched-box widthBreaks="320px">
      <div class="card">
        <img src='https://images.unsplash.com/photo-1554917420-44e47b14a75c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
        <div class="card-content">
          <h1>Card Component</h1>
          <p>A basic card component with an image, title, description, and call to action. By default, the image is on top and full-width, but inside larger containers the image is positioned on the left with the rest of the content beside it.</p>
        </div>
      </div>
    </watched-box>
  </resize-asaurus>
  <resize-asaurus>
    <watched-box widthBreaks="320px">
      <div class="card">
        <img src='https://images.unsplash.com/photo-1554917420-44e47b14a75c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
        <div class="card-content">
          <h1>Card Component</h1>
          <p>A basic card component with an image, title, description, and call to action. By default, the image is on top and full-width, but inside larger containers the image is positioned on the left with the rest of the content beside it.</p>
        </div>
      </div>
    </watched-box>
  </resize-asaurus>
</div>

.card {
  flex: 1;
  padding: 1rem;
  background: white;
  border: 1px solid #eee;
  border-radius: 8px;
  min-width: 180px;
  h1 {
    font-size: 1.2rem;
    margin: 0 0 1rem 0;
    line-height: 1.1;
  }
  img {
    width: 100%;
    display: block;
    margin: 0 0 1rem 0;
  }
  .w-gt-320px & {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

.page-wrap {
  display: grid;
  gap: 1rem;
  grid-template-columns: min-content 1fr;
  align-items: start;
}

body {
  display: grid;
  place-content: center;
  font: 90%/1.4 system-ui;
}

watched-box {
  display: block;
}

.resizeasaurus-size {
  display: none;
}
@supports (resize: horizontal) {
  .resizeasaurus {
    display: block;
    padding: 0;
    resize: horizontal;
    overflow: auto;
  }
  /* Workaround for Safari refusing to go below initial content width */
  .resizeasaurus:active {
    width: var(--resizeasaurus-initial-width, 1px);
  }
  .resizeasaurus-size {
    display: block;
    text-align: right;
    bottom: 0;
    padding-right: 1.5em;
    font-size: 0.8125em; /* 13px /16 */
    color: #666;
  }
}