If you really want columns in your forms
When designing forms with multiple columns, the following quick rule applies:
Double your font size and enter the largest realistic value that the input should accept. If it fits, your input is large enough.
The reason for this is that many people increase the font size in their browser and WCAG 1.4.4, although not entirely clear, suggests that this should allow an enlargement of up to 200%.
I'm not saying what it says as long as the page can be zoomed in, and this has always been a matter of controversy over what the rule actually means.
Even if this point is not clear, it is good practice.
Provided you use
em Units at
1rem / 1em, just adjust
font-size: 200% In your HTML code, enter the longest realistic information you can think of (i.e., enter "firstname.lastname@example.org" as the email address) if it suits you.
Since the font size is complex with Rems, Ems, etc., you can manually set the font size to 32 pixels with each input, as this is the equivalent. Also, don't forget to check your labels to see if they work.
If you find that there is still a lot of space left at the end, add another entry to the line if this makes sense.
A couple of additional considerations
Since this is labeled "Accessibility", make sure that the edge of your entrances has at least a 3: 1 contrast ratio to the surroundings. At first glance, it looks okay, but it is borderline.
One last thing to consider is, do items belong together? First name and last name do, but is the ID number related? I would be tempted to have the ID number on a different line.
Should you design forms with more than one column?
With all of this said, put an input on one line.
As soon as you start adding error messages, all of the above points fall apart (since error messages are usually longer).
Error messages still have to work with larger font sizes and usually become unclear if there are two or three columns.
Also, don't worry about vertical scrolling, it's common nowadays, and since a form ends with a submit button, users know when they have reached the end of their form (so you don't have to worry about people having fields miss.)