The width must be equal to the height of the block

Question

At the moment there is a variation of height versus width - Fiddle

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.aspect-ratio-1 {
  padding-bottom: 100%; /* (value height = value width) = 1 * 100% = 100%  */
  position: relative;
  background: #999;
}

.aspect-ratio-1-inner {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

<div class="aspect-ratio-1">
  <div class="aspect-ratio-1-inner"></div>
</div>

How to make the vertical resize width automatically change and equal the height of the block (If possible on css)?

Thank you I will be glad to any help!