JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<main>
  <div class="item a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet saepe incidunt repellat quod mollitia aspernatur placeat unde aperiam. Excepturi possimus debitis consequuntur a deleniti ex numquam, iure soluta consequatur illo.</div>
  <div class="item b">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur earum similique placeat soluta quia consequatur aut delectus repellat temporibus, quidem vel quas aliquid. Ea adipisci quae distinctio dignissimos accusantium dolore.</div>
  <div class="item c">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In explicabo molestias obcaecati inventore illo excepturi harum fugit eligendi voluptas quas sit voluptates, praesentium amet cum ipsa possimus atque optio iusto.</div>
</main>
<h1 id="out"></h1>

CSS

body, html {
  margin: 0;
}

main {
  display: flex;
  max-width: 100%;
}

.item {
  height: 8em;
  box-shadow: inset 0 0 3px hotpink;
}

.a, .c {
  flex: 1 12 auto;
}

.b {
  flex: 7 1 70%;
}

#out {
  text-align: center;
  margin: 4em auto;
}

JavaScript

function tick() {
const { width } = document.querySelector('.b').getBoundingClientRect();
document.querySelector('#out').textContent = (width / window.innerWidth * 100).toFixed(2);
requestAnimationFrame(tick);
}

tick();