Setting Custom Width for The Elements in a Form by JQuery

You can resize these text boxes using the mouse also. I think the min width using that method is 60px.
For JS, you can use something like:
ib = this.getQuestionContainer().querySelectorAll("input");

ib.forEach(item => item.style.width = "30px");

Thank you for the suggestions. Since I need to append different static text after each text box and set various size for the elements as requested by the end user. How can I do it?
Regards.

ib = this.getQuestionContainer().querySelectorAll("input");
This line gives you all the input boxes in your question.
You can then references each of the boxes using the index. So,

ib[0]

ib[1]

ib[?].style.width = "??px"

Thank you for the scripts. It's good in display mode. However, ib[0].style.width = "30px", for example does not reflect its change on mobile mode.
Besides, I want to add static text after the textbox. I tried the following but both 30% and "CatA" do not relfect the change.
jQuery("#ib[0]").css("max-width","30%").after(" CatA");
Further advice is welcome.

I manage to add static text after the textboxes. The display has not changed for 30px in mobile mode
regards.

Try out the survey on a mobile, sometimes JS effects doesn't show up in the preview.

I just tried out the survey on a mobile, the problem of long textbox prevails even I set them to 30px/20px. Pls. see the attached screenshot. The scripts are listed below.
var ib = this.getQuestionContainer().querySelectorAll("input");
var ib0 = ib[0];
var ib1 = ib[1];
ib[0].style.width = "30px";
ib[1].style.width = "20px";
$(ib0).insert({after: ' per times'});
$(ib1).insert({after: ' serving'});

Best.

Sorry to provide the out-dated screenshot. Pls. refer to the latest as shown below