Css 将未知数量的div与不同高度对齐

我正在创建一个网页，用户可以在其中为活动创建不同的票证类型

我不知道一个用户希望创建多少张票证，所以我不能使用CSS网格进行布局

相反，我使用了内联块

根据用户选择的票证选项，容器（className=createTicket）的高度会增加

发生这种情况时，className=createTicket的所有容器的高度都在增加，但它们不再对齐，我不明白为什么

当我将它们设置为相同高度时，它们仍然没有对齐。包含更多元素的票证位于页面顶部，其他元素位于页面下方

理想情况下，我希望每张票的大小和位置相同

下面是对html的简化

如果用户在第二个输入中选择“特定”，则该容器将显示另一个输入

:

---

在这种情况下，我会使用flexbox

将.wrapper更改为

display: flex;
justify-content: center;

和.wrapper>.content remove

display:inline块

.content {
    margin-top: 50px;
    margin-bottom: 30px;
    position: relative;
}


.wrapper {
    text-align: center;


}

.wrapper > .content {
    position: relative;
    padding: 3.5%;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    display: inline-block;
    width: 400px;
    margin: 2%;
}

.wrapper > .content + .content {
    margin-top: 0%;
}

display: flex;
justify-content: center;