JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box mixed">
  text orientation  
  <br>mixed
</div>

<div class="box upright">
  text orientation  
  <br>upright
</div>

<div class="box sideways">
  text orientation 
  <br>sideways
</div>

<div class="box sideways-right">
  text orientation  
  <br>sideways-right
</div>

CSS

* {
  box-sizing: border-box;
}

.wrapper {
  border: 5px dotted black;
}

.mixed {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.upright {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.sideways {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

.sideways-right {
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
}

.box {
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 20px;
  display: inline-block;
  vertical-align: middle;
}

body {
  margin: 2em 3em;
}