<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 class="container verticalReady" id="verticalReady">
  This text fits well horizontally, and vertically
.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() {  
var verticalReady = document.getElementById("verticalReady");
verticalReady.onclick = function() {              verticalReady.classList.toggle("verticalText")

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.