How to stop overflow of elements in a multi column in React?

Question

I have created a form with 2 columns which looks like this:

The Student name is mandatory field. So, when an empty input is required it throws a red text labelled as Required. The problem is that when this happens the field name marked as Student name: comes to the other column as shown below.

Here is my css for the same.

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

Is there a way to prevent that using the .css only or any workarounds to achieve that?

Answer 1

Can you put a minimum height of the rows?

If there is a chance to get the error message out, there should be more space.

Something like:

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