<article>
  <p>
    This line is <code>horizontal-tb</code> which is the initial value for
    <code>writing-mode</code>
  </p>
  <p>
    This line is <code>vertical-rl</code>—read from right to left and top to bottom.
  </p>
  <p>
    This line is <code>vertical-lr</code>—read from left to right and top to bottom.
  </p>
</article>

p:nth-child(2) {
  writing-mode: vertical-rl;
}

p:nth-child(3) {
  writing-mode: vertical-lr;
  padding-block: 1em;
}

p {
  max-inline-size: 20ch;
}

article {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

article > * {
  padding: 0.5em;
  border: 1px solid var(--color-stroke);
}