Need help aligning the phone number field

I have an entry for an international phone number and it breaks into two lines. The space allowed for the country code is way too big, as is the area code space. How do I fix this?

Your form has a lot of CSS codes that don't do any changes to your form per se. These codes also cause the misalignment of the second phone field. My recommendation is to remove all the codes on your FORM BUILDER, then inject the ones shown below:

.form-label {

  white-space: nowrap;

}

.phone-separate {

  display: none;

}

[data-type="control_phone"] .form-sub-label-container:first-child {

  width: 24%;

}

[data-type="control_phone"] .form-sub-label-container {

  width: 34%;

}

Complete guide: How-to-Inject-Custom-CSS-Codes

Result: