<main>
      <div class="wrapper">
        <article class="flow">
          <h1>Start and end, text align</h1>
          <figure class="callout">
            <p>
              Toggle the <code>direction</code> to see how <code>text-align</code> responds.
            </p>
          </figure>
          <label class="toggle" for="toggle-element">
            <span class="toggle__label">Toggle direction</span>
            <input
              type="checkbox"
              role="switch"
              class="toggle__element"
              id="toggle-element"
            />
            <div class="toggle__decor" aria-hidden="true">
              <div class="toggle__thumb"></div>
            </div>
          </label>
          <div class="sample flow">
            <div>
              <p>My <code>text-align</code> is <code>right</code>.</p>
              <p>My <code>text-align</code> is <code>end</code>.</p>
          </div>
        </article>
      </div>
    </main>

:root {
  --direction: ltr;
}

.sample {
  direction: var(--direction);
}

.sample p {
  margin: 0.5em;
  border: 1px solid var(--color-stroke);
  padding: 0.5em;
}

.sample p:nth-child(1) {
  text-align: right;
}

.sample p:nth-child(2) {
  text-align: end;
}

const toggle = document.querySelector('#toggle-element');

toggle.addEventListener('change', evt => {
  document.documentElement.style.setProperty(
    '--direction',
    evt.target.checked ? 'rtl' : 'ltr'
  );
});