<aside>
  <div>
    <h3>
      Document Direction <small>(block axis)</small>
    </h3>
    <select data-for="direction">
      <option value="ltr">left to right (ltr)</option>
      <option value="rtl">right to left (rtl)</option>
    </select>
  </div>
  <div>
    <h3>
      Writing Mode <small>(inline axis)</small>
    </h3>
    <select data-for="writing-mode">
      <option value="horizontal-tb">horizontal top to bottom (horizontal-tb)</option>
      <option value="vertical-rl">vertical right to left (vertical-rl)</option>
      <option value="vertical-lr">vertical left to right (vertical-lr)</option>
    </select>
  </div>
</aside>

<figure>
  <picture>
    <img src="https://picsum.photos/400/400" width="300" height="250" loading="lazy" />
  </picture>
  <figcaption>Random photo</figcaption>
</figure>

figure {
  background: white;
  border: 1px solid hsl(0 0% 90%);
  border-radius: 1ch;
  overflow: hidden;
}

figure img {
  display: block;
}

figcaption {
  padding-inline: 1ch;
  padding-block: 1ex;
}

aside {
  display: grid;
  gap: 4ch;
  text-align: end;
}

h3 {
  margin: 0;
  font-weight: 300;
}

img {
  background: linear-gradient(to bottom, hsl(0 0% 90%), hsl(0 0% 80%));
}

html {
  block-size: 100%;
  inline-size: 100%;
}

body {
  min-block-size: 100%;
  min-inline-size: 100%;
  margin: 0;
  padding: 2ch;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 2ch;
  align-items: center;
  justify-content: center;
  font-family: system-ui;
  font-size: 1.3rem;
  line-height: 1.5;
  background: hsl(200 20% 98%);
  color: hsl(200 30% 25%);
}

import $ from "https://unpkg.com/blingblingjs@2.1.1/src/index.js";

const [figure] = $("figure");

$("select").on("change", (e) => {
  const prop = $(e.target).attr("data-for");
  figure.style[prop] = e.target.value;
});