Html 如何在flex容器中固定对齐？

我有一张表格。标签和输入应始终居中对齐。为此，我使用

display: flex;
align-items: center;

在容器元素上。但是，当输入下出现错误文本时，标签会向下推。考虑到flex的行为，这是绝对正确的，但是有没有办法修复标签和输入之间的对齐，使它们始终居中对齐，而不考虑输入下面可能的div

此外，请考虑到这里必须使用flex容器

align-items:baseline;

---

也不是一个选项，因为可以有一个文本区域来代替输入。

不使用当前标记

实现这一点的一种方法是在出现错误消息时向父级添加一个类。使用这个类以及围绕输入和错误消息的包装器div，您完全可以将错误定位在输入下面，并将相关的边距添加到容器的底部

这样，错误消息将不在流中，因此对齐方式将如您所愿

.form-group.validation-error {
  margin-bottom: 30px;
}

.input-wrap {
  position: relative;
}

.error-message {
  position: absolute;
  top: 40px;
}