JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box horizontal-tb">writing mode  
  <br>horizontal-tb
</div>

<div class="box vertical-rl">
  writing mode  
  <br>vertical-rl
</div>

<div class="box vertical-lr">
  writing mode  
  <br>vertical-lr
</div>

<div class="box sideways-rl">
  writing mode  
  <br>sideways-rl
</div>

<div class="box sideways-lr">
  writing mode  
  <br>sideways-lr
</div>

CSS

* {
  box-sizing: border-box;
}

.wrapper {
  border: 5px dotted black;
}

.horizontal-tb {
  writing-mode: horizontal-tb;
  margin-bottom: 1em;
}

.vertical-rl {
  writing-mode: vertical-rl;
}

.vertical-lr {
  writing-mode: vertical-lr;
}

.sideways-rl {
  writing-mode: sideways-rl;
}

.sideways-lr {
  writing-mode: sideways-lr;
}

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

body {
  margin: 2em 3em;
}