When you set the maximum length property for the field on the page, your fields will get the attribute maxlength available.
This property can be used in a javascript action like below:
var ele = document.getElementsByClassName('form-control');
for (var i = 0; i < ele.length; i++ ) {
var elewidth = ele[i].getAttribute('maxlength');
ele[i].style.width = elewidth+'%';
}
This is just a simple example that retrieves all elements with the class form-control.
Loops over the elements and set the width of the fields to the maxlength as percentage.
Of course you’ll need some more calculation on the width needed, but this little piece of code might help you further in finding a fitting solution for your case.
The other option would be to define classes and assign these to the fields when there aren’t that many different field sizes (length constraints) this seems to be the better option.