<main>
  <aside class="controls">
    <div>
      <h3>
        Document Direction <small>(block axis)</small>
      </h3>
      <select data-for="direction">
        <option value="ltr">left to right (ltr)</option>
        <option value="rtl">right to left (rtl)</option>
      </select>
    </div>
    <div> 
      <h3>
        Writing Mode <small>(inline axis)</small>
      </h3>
      <select data-for="writing-mode">
        <option value="horizontal-tb">horizontal top to bottom (horizontal-tb)</option>
        <option value="vertical-rl">vertical right to left (vertical-rl)</option>
        <option value="vertical-lr">vertical left to right (vertical-lr)</option>
      </select>
    </div>
  </aside>
  <article>
    <button>Logical Props Y'all</button>
    <p>Lorem ipsum 🤓 dolor sit amet consectetur adipisicing elit.</p>
  </article>
</main>

button {
  /*  browsers with no support  */
  padding: 1ch 2ch;
  border: none;
  border: 5px solid hsl(160 50% 80%);
  border-top: none;
  border-bottom: none;
  
  /*  for everyone  */
  padding-block: 1ch;
  padding-inline: 2ch;
  border-inline: 1px solid hsl(160 50% 80%);
  border-block: none;
  
  appearance: none;
  cursor: pointer;
  font-size: 1.25rem;
  background: hsl(160 50% 90%);
  color: hsl(160 50% 20%);
  border-radius: 1ch;
}

main {
  display: grid;
  place-items: center;
  grid-auto-flow: row;
  gap: 4rem;
}

p {
  max-inline-size: 30ch;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.75;
  margin-block: 1ch;
  text-align: start;
}


@media (orientation: landscape) {
  main {
    grid-auto-flow: column;
  }
}

html {
  block-size: 100%;
  inline-size: 100%;
}

body {
  min-block-size: 100%;
  min-inline-size: 100%;
  margin: 0;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  font-family: system-ui, sans-serif;
}

aside {
  display: grid;
  gap: 2ch;
  padding: 2ch;
  background: white;
  border: 1px solid lightgray;
}

aside h3 {
  margin: 0 0 .5em 0;
}

import $ from 'https://unpkg.com/[email protected]/src/index.js'

const [article] = $('article')

$('select').on('change', e => {
  const prop = $(e.target).attr('data-for')
  article.style[prop] = e.target.value
})