<figure class="caption right-caption">
  <img src="https://assets.codepen.io/32795/santiago003.jpg?format=avif" alt="Image of Santiago, Chile">
  <figcaption>Image of Santiago, Chile</figcaption>
  </img>
</figure>
@import url("https://fonts.googleapis.com/css2?family=Montagu+Slab:opsz,wght@16..144,100..700&display=swap");

* {
  box-sizing: border-box;
}

.right-caption {
  display: flex;
  gap: 0.5rem;

  img {
    height: 534px;
    width: 800px;
  }

  figcaption {
    /* <weight>: Use a value from 100 to 700 */
    font-size: 2rem;

    writing-mode: vertical-rl;

    margin-block-end: 1rem;

    font-family: "Montagu Slab", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.