<h1>Click on text to toggle it's direction</h1>

<div class="container std" id="std">
  This text fits well horizontally, but not vertically
</div>

<div class="container verticalReady" id="verticalReady">
  This text fits well horizontally, and vertically
</div>

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

html {
  color-scheme: dark;
  font-size: 20px;
}

body {
  background: #292929;
  color: #DFDFDF;
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
}

h1 {
  margin-bottom: 3rem;
  color: #DC89F5;
}

.container {
  margin-bottom: .5rem;
  display: flex;
  cursor: pointer;
  background: #1F1F1F;
}

.std {
  width: 400px;
  height: 25px;
}

.verticalReady {
  block-size: 25px;
  inline-size: 400px;
}

var std = document.getElementById("std");
std.onclick = function() {  
  std.classList.toggle("verticalText")
};
var verticalReady = document.getElementById("verticalReady");
verticalReady.onclick = function() {              verticalReady.classList.toggle("verticalText")
};