<section class="news-card">
  <div class="card-image"></div>
  <div class="text">
    <h2>Headline 1</h2>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet...</p>
  </div>
</section>

<p>Cards inside narrow column:</p>

<div class="narrow-column">
  <section class="news-card">
  <div class="card-image"></div>
  <div class="text">
    <h2>Headline 1</h2>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet...</p>
  </div>
</section>
  <section class="news-card">
  <div class="card-image"></div>
  <div class="text">
    <h2>Headline 2</h2>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</section>
</div>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0.5rem;
}

.news-card {
  container-type: inline-size;
  container-name: news-card;
  display: flex;
  flex-wrap: wrap;
  background: white;
  border: 2px solid black;
  margin-bottom: 1rem;
  max-width: 50rem;
}

.news-card .card-image {
  flex-basis: 60%;
  aspect-ratio: 4 / 3;
  background-color: darkred;
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='20' patternTransform='scale(2) rotate(40)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 0%, 0)'/><path d='M-10 7.5l20 5 20-5 20 5'  stroke-linejoin='round' stroke-linecap='round' stroke-width='2.5' stroke='hsla(0, 0%, 4%, 0.53)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>")
}

.news-card .text {
  padding: 1rem;
  flex-basis: 40%;
  flex-grow: 0;
}

.news-card .text h2 {
  margin-top: 0;
}

.news-card .text p:last-child {
  margin-bottom: 0;
}

@container news-card (max-width: 25rem) {
    .news-card .card-image {
        flex-basis: 100%;
        background-color: darkorange;
        aspect-ratio: 16 / 9;
    }
    .news-card .text {
      flex-grow: 1
    }
}

.narrow-column {
  max-width: 16rem;
  background: lightgrey;
  padding: 1rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.