JSFiddle - React, Tailwind, and code Playground

HTML

<div id="vw"></div>
<div id="calc"></div>
<div id="js"></div>
<pre id="pre"></pre>

CSS

#vw {
  position: absolute;
  left: -1000px;
  width: 100vw;
}
#calc {
  height: 10px;
  background: blue;
  width: calc(5px + (15 - 5) * ((100vw - 320px) / (940 - 320)));
}
#js {
  margin-top: 5px;
  height: 10px;
  background: red;
  width: 0;
}

JavaScript

function get(selector){
  return parseFloat(getComputedStyle(document.querySelector(selector)).width, 10)
}
function set(selector, value){
  document.querySelector(selector).style.width = value + 'px';
}

const resize = () => {
  const vw = get('#vw');
  const js = (5 + (15 - 5) * ((vw - 320) / (940 - 320)));
  const calc = get('#calc')
	set('#js', js);

  pre.innerHTML = `
<b>vw:</b> ${vw}
<b style="color:blue">calc:</b> ${calc}
<b style="color:red">js:</b> ${js}
`
};
resize();
addEventListener('resize', resize);