Html 制作两列，每列有2张图片

我知道这是一个愚蠢的页面，但我正在制作一个“会见我的团队”页面，我想制作一个列，每个列代表公司的不同部门，每个列都有两张图片。每张照片下都会有员工的名字

HTML如下所示：

<div class="profession">
    <h3>Management</h3>
    <div class="employee">
        <img src="pictures/placeholder.png" alt="">
        <h6>John Doe1</h6>
        <img src="pictures/placeholder.png" alt="">
        <h6>John Doe2</h6>
    </div>
</div>

<div class="profession">
    <h3>Developers</h3>
    <div class="employee">
        <img src="pictures/placeholder.png" alt="">
        <h6>John Doe3</h6>
        <img src="pictures/placeholder.png" alt="">
        <h6>John Doe4</h6>
    </div>
</div>

---

所以我的问题是如何在CSS中实现这一点

以下是使用Flexbox的简单两列布局：

<div class="row">
    <div class="profession column"><h3>Management</h3>...</div>
    <div class="profession column"><h3>Developers</h3>...</div>
</div>

---

制作一个接受所有代码的div，然后为大div中的每个div设置宽度，或者使用bootstrap，这会更容易。

.row {
    display: flex;
}

.column {
    flex: 50%;
}