<div class="controls">
  <button id="toggle">Toggle Writing Mode</button>
</div>

<div id="examples">
  <div id="example" class="container max-width">
    <h1><code>max-width</code></h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum quidem sint molestias voluptas cumque perspiciatis eius laudantium magnam! Sed nisi mollitia quisquam fugit veniam, minus ut consequatur nam accusamus vitae.</p>
  </div>

  <div id="example" class="container max-inline-size">
    <h1><code>max-inline-size</code></h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum quidem sint molestias voluptas cumque perspiciatis eius laudantium magnam! Sed nisi mollitia quisquam fugit veniam, minus ut consequatur nam accusamus vitae.</p>
  </div>
</div>

.examples {
  max-block-size: 100%;
}

.container {
  background: MediumTurquoise;
  display: inline-block;
  margin: 1rem;
  padding: 1.5rem;
}

.max-width {
  max-height: 500px;
  max-width: 250px;
}

.max-inline-size {
  max-inline-size: 250px;
}

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

.controls {
  display: block;
  margin: 2rem;
}

h1 {
  font-size: 1.5rem;
}

const examples = document.getElementById('examples').classList;
const button = document.getElementById("toggle");

function changeWritingMode() {
  if (examples.contains("mode-vrl")) {
    examples.remove("mode-vrl");
  } else {
    examples.add("mode-vrl");
  }
}

button.addEventListener("click", changeWritingMode);