<div class="toolbar">
  <label for="writing-mode-select">Choose writing mode:</label>
<select name="writing-modes" id="writing-mode-selec">
    <option value="horizontal-tb">horizontal top to bottom</option>
    <option value="vertical-rl">vertical right to left</option>
    <option value="vertical-lr ">vertical lft to right</option>
</select>
</div>
<p id="text-container" class="horizontal-rl">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate esse asperiores iste nam. Accusantium odio error illo dolor corrupti rerum aut iste, dolore architecto eligendi maxime nulla incidunt molestias hic.</p>

html {
  margin: 2rem;
}

.toolbar {
  margin-block-end: 2rem;
}

p {
  inline-size: 400px;
  background-color: MediumTurquoise;
  padding: 2rem;
}

.horizontal-tb {
  writing-mode: horizontal-tb;
}
.vertical-rl {
  writing-mode: vertical-rl;
}
.vertical-lr {
  writing-mode: vertical-lr;
}

  document.getElementById("writing-mode-selec").onchange = (e) => {
    var className = e.target.value;
    document.getElementById("text-container").className = className;
  }