<div class="demo">
  <div class="unit-field-group">
    <label class="unit-label" for="kmInput">Distance</label>
    <div class="unit-pair">
      <div class="unit-input-wrap">
        <input type="text" id="kmInput" inputmode="decimal" value="42" />
        <span class="unit-suffix">km</span>
      </div>
      <span class="unit-eq">=</span>
      <div class="unit-input-wrap">
        <input type="text" id="miInput" inputmode="decimal" value="26.10" />
        <span class="unit-suffix">mi</span>
      </div>
    </div>
  </div>

  <div class="unit-field-group">
    <label class="unit-label" for="kgInput">Weight</label>
    <div class="unit-pair">
      <div class="unit-input-wrap">
        <input type="text" id="kgInput" inputmode="decimal" value="70" />
        <span class="unit-suffix">kg</span>
      </div>
      <span class="unit-eq">=</span>
      <div class="unit-input-wrap">
        <input type="text" id="lbInput" inputmode="decimal" value="154.32" />
        <span class="unit-suffix">lb</span>
      </div>
    </div>
  </div>

  <p class="unit-hint">Edit either field in a pair — the other updates instantly, in either direction.</p>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { width: 380px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }

.unit-field-group { display: flex; flex-direction: column; gap: 8px; }
.unit-label { font-size: 12.5px; font-weight: 700; color: #334155; }
.unit-pair { display: flex; align-items: center; gap: 10px; }
.unit-eq { font-size: 13px; font-weight: 700; color: #94a3b8; flex-shrink: 0; }

.unit-input-wrap { flex: 1; position: relative; display: flex; align-items: center; }
.unit-input-wrap input { width: 100%; padding: 11px 44px 11px 12px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 14px; font-weight: 600; color: #0f172a; font-family: inherit; background: #fff; }
.unit-input-wrap input:focus-visible { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.unit-suffix { position: absolute; right: 12px; font-size: 12px; font-weight: 700; color: #94a3b8; pointer-events: none; }

.unit-hint { font-size: 11.5px; color: #94a3b8; line-height: 1.5; }

// Each linked pair is defined once, declaratively, with the conversion
// factor going from "a" to "b". The reverse direction is just division by
// the same factor, so there's exactly one number to get right per pair.
const PAIRS = [
  { aId: 'kmInput', bId: 'miInput', aToB: 0.621371, precision: 2 },
  { aId: 'kgInput', bId: 'lbInput', aToB: 2.20462, precision: 2 },
];

function wireLinkedPair({ aId, bId, aToB, precision }) {
  const aInput = document.getElementById(aId);
  const bInput = document.getElementById(bId);

  // A guard flag prevents infinite ping-pong: updating B from A's input event
  // would otherwise trigger B's own input event, which would try to update A
  // again, forever. Setting isSyncing suppresses the reciprocal update for
  // exactly the duration of the one field write that's already in flight.
  let isSyncing = false;

  function sanitize(raw) {
    return raw.replace(/[^0-9.]/g, '');
  }

  function parse(raw) {
    const n = parseFloat(raw);
    return isNaN(n) ? null : n;
  }

  aInput.addEventListener('input', () => {
    if (isSyncing) return;
    aInput.value = sanitize(aInput.value);
    const n = parse(aInput.value);
    if (n === null) return;
    isSyncing = true;
    bInput.value = (n * aToB).toFixed(precision);
    isSyncing = false;
  });

  bInput.addEventListener('input', () => {
    if (isSyncing) return;
    bInput.value = sanitize(bInput.value);
    const n = parse(bInput.value);
    if (n === null) return;
    isSyncing = true;
    aInput.value = (n / aToB).toFixed(precision);
    isSyncing = false;
  });
}

PAIRS.forEach(wireLinkedPair);