<div class="controls"> 
  <label for="direction">direction:</label>
  <select id="direction">
    <option value="ltr">ltr</option>
    <option value="rtl">rtl</option>
  </select>

  <label for="writingmode">writing-mode:</label>
  <select id="writingmode">
    <option value="horizontal-tb">horizontal-tb</option>
    <option value="vertical-lr">vertical-lr</option>
    <option value="vertical-rl">vertical-rl</option>
  </select>
</div>

<div class="container">
  <div class="box">
    <p>inline-size: 300px</p>
    <p>block-size: 150px</p>
  </div>
</div>
html {
  background: #f1f1f1;
}
.box {
  inline-size: 300px;
  block-size: 150px;
  background-color: #c94e4b;
  color: white;
  font-size: 2rem;
  padding: 1rem;
  margin: 0 0.625rem;
}
p {
  margin: 0.5rem;
}
.controls {
  margin: 0 0.625rem;
  padding: 1.875rem 0.375rem;
  font-size: 1.2rem;
  color: #2f4f4f;
}
.controls select {
  margin-right: 1.25rem;
  color: #2f4f4f;
  font-size: 1.2rem;
}

@supports not (inline-size: 100%) {
  .controls,
  .container {
    display: none;
  }
  body::after {
    content: "Your browser doesn't support logical properties related to width and height. Try to test the demo with the following browsers: Firefox 41+, Chrome  69+, or Safari 12.1+";
    font-size: 1.2rem;
    color: #2f4f4f;
  }
}
$(document).ready(function() {
  $("#direction").change(function() {
    var direction = $("#direction").val();
    $(".container").css("direction", direction);
  });

  $("#writingmode").change(function() {
    var wmode = $("#writingmode").val();
    $(".container").css("writing-mode", wmode);
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js