<div class="container_wrap">
  <article>
    <img src="https://uploads.sitepoint.com/wp-content/uploads/2023/07/1690333417red-poppies.jpg" alt="Red poppy flowers in a field, against a bright blue sky.">
    <div>
      <h3>Red poppies</h3>
      <p>Red poppies in a field. Photo by <a href="https://unsplash.com/@corina">Corina Ardeleanu</a> from <a href="https://unsplash.com/images/nature/flower?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></p>
    </div>
  </article>
<div>

<div class="container_vertical" lang="zh">
  <article>
    <img src="https://uploads.sitepoint.com/wp-content/uploads/2023/07/1690333417red-poppies.jpg" alt="Red poppy flowers in a field, against a bright blue sky.">
    <div>
      <h3>红罂粟</h3>
      <p>田野里的红色罂粟花。 照片由 <a href="https://unsplash.com/@corina">Corina Ardeleanu</a> 拍摄，来自 <a href="https://unsplash.com/photos/sWlxCweDzzs">Unsplash</a>.</p>
    </div>
  </article>
</div>

@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700&family=ZCOOL+KuaiLe&display=swap");

:root {
  font: normal 100% / 1.2 Lora, serif;
  background: #fff;
  color: #000;
}

h3, p {
  margin-block: 0 0.5rem;
}

.container_wrap {
  container-type: inline-size;
}

article {
  display: grid;
  gap: 1rem;
  grid-template-areas:  "img txt";
  grid-template-columns: 33cqi auto;
  margin-block: 0 1rem;
}

article > div {
  grid-area: txt;
}

img {
  aspect-ratio: 600/400;
  grid-area: img;
  height: auto;
  inline-size: 100%;
}

h3 {
  font-size: 4cqi;
}

p {
  font-size: 2cqi;
}

.container_vertical {
  container-type: block-size;
  font-family: 'ZCOOL KuaiLe', sans-serif;
  writing-mode: vertical-lr;
}

.container_vertical h3 {
  font-size: 6cqi;
}

 .container_vertical p {
  font-size: 4cqi;
  line-height: 1.5;
}