<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>inset-block-start: 0</p>
    <p>inset-inline-start: 0</p>
  </div>
</div>
html {
  background: #f1f1f1;
}
.box {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  background-color: #da6f2b;
  color: white;
  font-size: 1.2rem;
  padding: 1rem;
  margin: 0;
}
.box p {
  margin: 0.5rem;
}
.controls {
  margin: 0 13.75rem;
  font-size: 1.2rem;
  color: #2f4f4f;
}
.controls select {
  display: block;
  margin: 0 0 1.25rem 0;
  color: #2f4f4f;
  font-size: 1.2rem;
}
@supports not (inset-block-start: 0) {
  .controls,
  .container {
    display: none;
  }
  body::after {
    content: "Your browser doesn't support logical properties related to position. 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