<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"></span>
#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() {
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.