<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">Lorem ipsum</span>
</div>
#parent {
  background: tomato;
  width: 600px;
  height: 200px;
}

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

.width-chooser {
  text-align: center;
}
var parent = document.getElementById('parent');

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.