<div class="controls">
    <label for="switcher">align-items</label>
    <select id="switcher">
      <option value="start">start</option>
      <option value="self-start">self-start</option>
      <option value="end">end</option>
      <option value="self-end">self-end</option>
    </select>
  
  <p><em>Text direction on the second item is right to left</em></p>
</div>
<div class="container">
  <div class="item">Item 1</div>
  <div class="item" style="direction: rtl">Item 2</div>
  <div class="item">Item 3</div>
</div>

:root {
  --var-align-items: start;
}

.container {
  border: 5px solid rgba(149, 184, 209, 1);
  background-color: rgba(149, 184, 209, .3);
  display: flex;
  gap: 10px;
  inline-size: 300px;
  flex-direction: column;
  align-items: var(--var-align-items);
}

.item {
  background-color: rgba(59, 51, 85, 1);
  color: #fff;
  padding: 10px;
}

.controls {
  margin: 1em 0;
  border: 1px solid #ccc;
  padding: 10px;
}

body {
  font: 1em system-ui;
}

let switcher = document.getElementById("switcher");
let switcher2 = document.getElementById("switcher2");
let root = document.documentElement;

switcher.addEventListener("change", function (evt) {
   root.style.setProperty('--var-align-items', evt.target.value);
});