<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="float-inline-start">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
  <div class="clearfix"></div>
  <div class="float-inline-end">
    <ul>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
  </div>
</div>
html {
  background: #f1f1f1;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0.6rem;
}
li { 
  display: inline-block;
  color: white;
  text-align: center;
  font-size: 2rem;
  margin: 0.3125rem;
  padding: 2rem;
}
.float-inline-start li {
  float: inline-start;
  background-color: #6a478f;
}
.float-inline-end li {
  float: inline-end;
  background-color: #49b293;
}
.clearfix {
  clear: both;
}
.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 (float: inline-start) {
  .controls,
  .container {
    display: none;
  }
  body::after {
    content: "Your browser doesn't support logical properties related to float. 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