논리적 속성

<div class="wrap">
  <div class="row" id="demo">
    <div class="col">
      <b class="lbl">physical</b>
      <div class="box phys"><span class="accent"></span><i class="ln"></i><i class="ln"></i></div>
    </div>
    <div class="col">
      <b class="lbl">logical</b>
      <div class="box logi"><span class="accent"></span><i class="ln"></i><i class="ln"></i></div>
    </div>
  </div>
  <div class="dirtag" id="dirtag">dir: ltr</div>
</div>

.wrap{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(94%,440px)}
.row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;width:100%}
.col{display:flex;flex-direction:column;gap:6px;flex:1;min-width:150px}
.lbl{font:700 10px/1 ui-monospace,monospace;color:var(--muted);text-align:center}
.box{position:relative;height:96px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  padding:10px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.accent{position:absolute;top:0;bottom:0;width:6px;background:var(--accent-2)}
.phys .accent{left:0}
.logi .accent{inset-inline-start:0}
.ln{display:block;height:8px;border-radius:3px;background:var(--line);width:60%;transition:margin .6s}
.phys .ln{margin-left:16px}
.logi .ln{margin-inline-start:16px}
.dirtag{font:700 11px/1 ui-monospace,monospace;color:var(--accent-2);background:var(--surface);
  border:1px solid var(--line);border-radius:6px;padding:4px 8px}

const demo = document.getElementById('demo');
const dirtag = document.getElementById('dirtag');
let rtl = false;
setInterval(() => {
  rtl = !rtl;
  demo.setAttribute('dir', rtl ? 'rtl' : 'ltr');
  dirtag.textContent = 'dir: ' + (rtl ? 'rtl' : 'ltr');
}, 1800);