<div class="compare">
  <section class="before">
    <small>BALANCED</small>
    <h2 class="balanced">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h2>
    <p class="balanced">Voluptates incidunt in at cumque quidem. Reiciendis maxime veniam molestias vero quae sequi exercitationem, nemo ullam excepturi dicta unde minus aliquid modi?</p>
    <br>
    <small>PRETTY</small>
    <h2 class="pretty">Tortor id aliquet lectus proin nibh nisl id donec.</h2>
    <p class="pretty">Nec nam aliquam sem et tortor. Non sodales neque sodales ut etiam sit amet. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Quis risus sed vulputate odio ut enim blandit volutpat maecenas condimentum.</p>
  </section>
  <section class="after">
    <small>NOT BALANCED</small>
    <h2>Lorem ipsum, dolor sit amet consectetur elit.</h2>
    <p>Voluptates incidunt in at cumque quidem. Reiciendis maxime veniam molestias vero quae sequi exercitationem, nemo ullam excepturi dicta unde minus aliquid modi?</p>
    <br>
    <small>NOT PRETTY</small>
    <h2>Tortor id aliquet lectus proin nibh nisl id donec.</h2>
    <p>Nec nam aliquam sem et tortor. Non sodales neque sodales ut etiam sit amet. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Quis risus sed vulputate odio ut enim blandit volutpat maecenas condimentum.</p>
  </section>
  <input type="range" id="range">
</div>

@layer demo {
  .balanced {
    text-wrap: balance;
  }
  
  .pretty {
    text-wrap: pretty;
  }
  
  h2, p {
    max-inline-size: 30rem;
  }
}

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;
    display: grid;
  }
  
  p {
    font-size: 1.25rem;
    line-height: 1.5;
  }
  
  .compare {
    display: grid;
    
    > * {
      grid-area: 1 / 1;
    }
    
    > section {
      display: grid;
      place-content: center;
      gap: 2ch;
    }
  }
  
  .before {
    mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0);
  }
  
  .after {
    mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0);
  }
  
  input[type="range"] {
    z-index: 1;
    appearance: none;
    background: transparent;
    cursor: pointer;
    
    &::-webkit-slider-thumb {
      appearance: none;
      width: 4px;
      height: 100dvh;
      background-color: hotpink;
    }
  }
  
  small {
    border-radius: 50px;
    border: 1px solid LinkText;
    max-inline-size: max-content;
    padding-inline: 1ch;
    padding-block: .25ch;
  }
}

range.oninput = () =>
document.body.style.setProperty('--pos', range.value + '%');