How, in CSS, can you create a relative width depending on the height? -

so have following html code:

<div class="box">     <div class="square">         <div class="aspect-ratio"></div>     </div>     <div class="label">hello world</div> </div> 

css

.box {     position   : relative;     width      : 100%;     background : red; }  .square {     position   : absolute;     left       : 0px;     top        : 0px;      width      : auto; // needs contain square aspect ratio depending on height.     height     : 100%;      background : blue; }  .label {     padding   : 20px;     font-size : 14px; }