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

问题描述

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

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

这是我的css。

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

是否有一种方法可以防止仅使用.css或任何变通办法来实现这一目标？

解决方法

可以将行的最小高度放吗？

如果有机会发出错误消息，则应该有更多空间。

类似的东西：

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