<div class="width-chooser">
  Change the size of parent <br />
  <input type="range" min="0" max="1000" id="input-width" />
<div id="parent">
  <span class="child">Lorem ipsum</span>
#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() {

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.