Area code stretching on mobile

The area cdse keeps stretching on mobile view creating 2 lines for phone. Area code stretched too much.

I have tried everything, turning on off resposive, redesigning on the basic perhaps you have a workaround.

I attached a pic

Inject this CSS codes to your form, this should position them side by side.

/*responsive phone fields*/

[data-type="control_phone"] input[name$="[area]"] {

  width: 80%;

}

[data-type="control_phone"] input[name$="[phone]"] {

  width: 100%;

}

[data-type="control_phone"] input[name$="[full]"] {

  width: 100%;

}

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

    width: 40%;

}

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

  width: 60%;

  float: right;

  margin-right: 0;

}

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

    width: 56%;

}    

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes (paste it at the bottom part if you have existing CSS codes in your form)

Here's how it looks afterwards