Square Root in CSS

index.html

<meta charset="utf-8">

<style>
  .square-root {
    --n: 0;
    --guess-0: 1;
    --guess-1: calc(0.5 * calc(var(--guess-0) + calc(var(--n) / var(--guess-0))));
    --guess-2: calc(0.5 * calc(var(--guess-1) + calc(var(--n) / var(--guess-1))));
    --guess-3: calc(0.5 * calc(var(--guess-2) + calc(var(--n) / var(--guess-2))));
    --guess-4: calc(0.5 * calc(var(--guess-3) + calc(var(--n) / var(--guess-3))));
    --guess-5: calc(0.5 * calc(var(--guess-4) + calc(var(--n) / var(--guess-4))));
    --guess-6: calc(0.5 * calc(var(--guess-5) + calc(var(--n) / var(--guess-5))));
    --guess-7: calc(0.5 * calc(var(--guess-6) + calc(var(--n) / var(--guess-6))));
    --guess-8: calc(0.5 * calc(var(--guess-7) + calc(var(--n) / var(--guess-7))));
    --guess-9: calc(0.5 * calc(var(--guess-8) + calc(var(--n) / var(--guess-8))));
  }

  .guess-1 { display: block; background: black; width: calc(1px * var(--guess-1)); }
  .guess-2 { display: block; background: black; width: calc(1px * var(--guess-2)); }
  .guess-3 { display: block; background: black; width: calc(1px * var(--guess-3)); }
  .guess-4 { display: block; background: black; width: calc(1px * var(--guess-4)); }
  .guess-5 { display: block; background: black; width: calc(1px * var(--guess-5)); }
  .guess-6 { display: block; background: black; width: calc(1px * var(--guess-6)); }
  .guess-7 { display: block; background: black; width: calc(1px * var(--guess-7)); }
  .guess-8 { display: block; background: black; width: calc(1px * var(--guess-8)); }
  .guess-9 { display: block; background: black; width: calc(1px * var(--guess-9)); }
</style>

<div class="square-root" style="--n: 128;">
  <div class="guess-1">&nbsp;</div>
  <div class="guess-2">&nbsp;</div>
  <div class="guess-3">&nbsp;</div>
  <div class="guess-4">&nbsp;</div>
  <div class="guess-5">&nbsp;</div>
  <div class="guess-6">&nbsp;</div>
  <div class="guess-7">&nbsp;</div>
  <div class="guess-8">&nbsp;</div>
  <div class="guess-9">&nbsp;</div>
</div>

thx