<div class="controls repel">
  <div class="cluster">
    <label for="size">Change font size</label>
    <input id="size" type="range" min="1" max="8" step="0.5" value="2.5" />
  </div>
  <div class="cluster">
    <input id="fixed-lh" type="checkbox" role="switch" />
    <label for="fixed-lh">Disable ratio-based line-height</label>
  </div>
</div>
<p>The quick brown fox jumps over the lazy dog</p>

p {
  font-size: var(--font-size, 2.5rem);
  line-height: 1.1;
  font-weight: 700;
}

p[data-fixed-lh] {
  line-height: 2.75rem;
}

.cluster {
  --gutter: 0.5rem;
  flex-wrap: nowrap;
  line-height: 1.1;
  align-items: flex-start;
}

.cluster:nth-child(2) {
  max-width: 30rem;
}

.cluster:nth-child(1) {
  align-items: center;
}

.cluster:nth-child(1) label {
  flex-shrink: 0;
}

.cluster:nth-child(1) input {
  flex-basis: 40%;
}

input {
  accent-color: var(--color-primary);
}

.controls {
  background: var(--color-light);
  border: 1px dashed var(--color-mid);
  padding: var(--space-s);
  align-items: center;
  margin-bottom: var(--space-m-l);
}

@media (max-width: 40em) {
  .cluster:first-of-type {
    flex-wrap: wrap;
  }
}

const sizeControl = document.getElementById("size");
const fixedLHControl = document.getElementById("fixed-lh");
const pElement = document.querySelector("p");

sizeControl.addEventListener("input", () => {
  document.documentElement.style.setProperty(
    "--font-size",
    `${sizeControl.value}rem`
  );
});

fixedLHControl.addEventListener("change", () => {
  if (fixedLHControl.checked) {
    pElement.setAttribute("data-fixed-lh", "");
    return;
  }

  pElement.removeAttribute("data-fixed-lh");
});