JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<label>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
  </div>
</label>

SCSS

* {
  box-sizing: border-box;
}

label {
  display: block;
  max-width: 366px;
  width: 100%;
  margin: auto;
  --fontSize: 100vw;
  --percentage: 1;
}

div {
  display: flex;
  justify-content: center;
}

span {
  font-size: calc(var(--fontSize) * var(--percentage));
  margin-right: 8px;
  border-bottom: 1px solid gray;
  flex-grow: 1;
  text-align: center;
}

JavaScript

console.clear();

let label = document.querySelector('label');
let div = document.querySelector('div');
let spans = document.querySelectorAll('span');

function adjust() {
	let viewportWidth = document.body.getBoundingClientRect().width;
  let labelWidth = label.getBoundingClientRect().width;
  let divWidth = div.getBoundingClientRect().width;
  let spanWidth = spans[0].getBoundingClientRect().width;
  
  let percentage = spanWidth / viewportWidth;
  console.log(percentage);
  
  label.style.cssText = `--percentage: ${percentage}`;
}

window.addEventListener('resize', adjust);
adjust();