<div class="width-chooser">
  Change the size of parent <br />
  <input type="range" min="0" max="1000" id="input-width" />
</div>
<div id="parent">
  <span class="child"></span>
</div>

#parent {
  background: tomato;
  width: 600px;
  height: auto;
}

.child {
  background: greenyellow;
  width: 10px;
  height: 0;
  padding-top: 100%;
  display: block;
}

.width-chooser {
  text-align: center;
}

* {
  box-sizing: border-box;
}

var parent = document.getElementById('parent');

document.getElementById('input-width').addEventListener('change', function() {
  parent.style.width=`${this.value}px`;  
});