<span id="metric">width: 200px</span>
<input id="input" type="range" min="100" max="500" step="5" value="200">

<div class="container">
  <div id="box">aspect-ratio</div>
  <div id="box2">
    <div class="parent">
      <div class="padding_box">padding-top</div>
    </div>
  </div>
</div>

.container{
  display: flex;
}
#box {
  border: 1px solid black;
  width: 200px;
  background: yellow;
  aspect-ratio: 1/1;
}
#box2{
  width: 200px;
}
.parent{
  position:relative;
  width:100%;
  padding-top:100%;
  overflow: hidden;
}
.parent .padding_box{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  background:green;
}