保持容器中有一个以上子分区的子分区的长宽比

Question

我当前的解决方案使用此“填充自底技巧”，不适用于我的情况：
Height equal to dynamic width (CSS fluid layout)

问题，我在img-div下有第二个具有动态高度的div。

如何使img-div的高度与宽度相同？

HTML

<div class="item">
  <div class="img">height same as width please</div>
  <div class="txt">disregard my dynamic height</div>
</div>

CSS

.item {
  position: relative;
  width: 50%;
}
.item:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.txt {
  position: relative;
}

Codepen Example