<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.