如何阻止 React 中多列元素的溢出？

Question

我创建了一个包含 2 列的表单，如下所示：

学生姓名是必填字段。因此，当需要空输入时，它会抛出标记为 Required 的红色文本。问题是，当发生这种情况时，标记为 Student name: 的字段名称会出现在另一列中，如下所示。

这是我的 css 同样的。

.formLayout{
  column-count: 2;
  column-gap: 5%;
}

有没有办法阻止仅使用 .css 或任何解决方法来实现这一点？

Answer 1

你能设置行的最小高度吗？

如果有机会把错误信息弄出来，应该还有更多space。

类似于：

display: grid;
grid-template: repeat(2, 100px) / 50% 50%;
column-gap: 5%;