JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="test">

  </div>
</div>

CSS

#container {
  width: auto;
}

#test {
  width: 50%;
  height: 10px;
  background: red;
}

JavaScript

function getComputedCSSValue(ele, prop) {
  var resolvedVal = window.getComputedStyle(ele)[prop];
  //does this return a pixel based value?
  if (/px/.test(resolvedVal)) {
    var origDisplay = ele.style.display;
    ele.style.display = 'none';
    var computedVal = window.getComputedStyle(ele)[prop];
    //restore original display
    ele.style.display = origDisplay;
    return computedVal;
  } else {
    return resolvedVal;
  }
}

var log = [];
var container = document.getElementById('container');
log.push('container width = ' + window.getComputedStyle(container).width);
log.push('container getComputedCSSValue width = ' + getComputedCSSValue(container, 'width'));
var test = document.getElementById('test');
log.push('container width = ' + window.getComputedStyle(test).width);
log.push('container getComputedCSSValue width = ' + getComputedCSSValue(test, 'width'));

alert(log.join('\n'));