Как сделать ширину CSS такой же, как высота, если высота неизвестна и может отличаться (высота зависит от других динамических факторов)?

Question

Высота соответствующего элемента (элемента с классом "child") равна высоте содержимого его родного элемента (установленного align-items: stretch его родительским элементом). Коды показаны ниже

Высота div.child устанавливается автоматически и может отличаться. Я хочу, чтобы ширина этого элемента всегда соответствовала его высоте. Короче говоря, я хочу, чтобы div.child всегда было квадратным.

Ссылка Codepen демо -> https://codepen.io/pen/?editors=1100

.parent {
    display: flex;
    align-items: stretch;
}

.parent .child {
    border: 1px solid black;
}

<div class="parent">
   <div class="child"> I want to set the width of this element equals to its height (which is equals to the height of the content of it's  sibling, set by `align-items : stretch`) </div>
   <div class="child childs-sibling">
          some text <br>
          some text <br>
          some text <br>
          some text <br>
   </div>
</div>