In my form, I have a total of 4 fields with two fields in each row. The problem arises when the title of one field is very long, causing that particular field to shift downwards and resulting in misalignment within the form structure. For example:
Very long Field name Small field name
that is wrapped in three __________________
lines
______________________
Field 3 Field 4
______________________ ___________________
The solution would be to ensure that both the very long field name and the small field name inputs are on the same line, like so:
Very long Field name Small field name
that is wrapped in three
lines
______________________ ___________________
This is how my HTML code looks like:
<div class="form-group">
<label>form field name</label>
<input type="text">
</div>
Attempting to address this issue in CSS, I used the following:
.form-group{
flex:60%;