Html 如何使用带有图像和文本的方形框

有没有可能在一行中有两个正方形的div框，它们之间有一些空间。它们都是从顶部的图像开始，然后是标题、文本和底部的按钮

我曾经尝试过css:flex，但最终不可能让两个框都具有相同的高度和宽度，它们必须都是正方形

我的问题是图像上的比另一个高一点，现在我不能得到两个同样大小的正方形。即使图像相同，文本中也有不同的内容。也许左边还有一些字，所以又有一个不同的高度，我无法处理

<div class="wrapper">
  <div class="box">
    <img src="example1.jpg" />
    <h2>Headline 1</h2>
    <p>Description 1</p>
    <button></button>
  </div>
  <div class="box">
    <img src="example2.jpg" />
    <h2>Headline 2</h2>
    <p>Description 2 <br>with special line</p>
    <button></button>
  </div>
</div>

.wrapper { display:flex; flex-wrap:wrap;justfiy-content:space-between; width: 30vmax; }
.box { flex: 0 0 40%; height: 50%; text-align:center; }

标题1
说明1

标题2
说明2
带有专用线

.wrapper{display:flex；flex-wrap:wrap；justfiy-content:space-between；width:30vmax；}
.box{flex:0 40%；高度：50%；文本对齐：居中；}

编辑 谢谢你的工作。它看起来和我的差不多。 但不幸的是，它的形状不是正方形/方形。 这是我在这个问题上的目标。 我猜问题在于正方形/样方取决于其内容。或者我需要javascript来实现高度等于框的宽度。

.wrapper{
显示器：flex；
证明内容：之间的空间；
宽度：65V最大；
高度：30V最大；
边框：1px纯黑；
}
.box{
弹性：0.40%；
身高：100%；
文本对齐：居中；
边框：1px纯黑；
}

标题1
说明1

按钮
标题2
说明2
带有专用线

按钮

.wrapper{
显示器：flex；
证明内容：周围的空间；
}
.盒子{
弹性：0.40%；
文本对齐：居中；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
边框：1px红色虚线；
}
钮扣{
页边顶部：自动；
}

标题1
说明1

标题2
说明2

专线

您正在使用哪些图像？你能摆好小提琴吗？这是住在什么地方吗？