JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <label for="how-many">Quantity</label>
    <span>
        <i class="substract-value">-</i>
        <input id="how-many" value=1>
        <i class="add-value">+</i>
    </span>
</div>

CSS

.substract-value, .add-value {
    cursor: pointer;
    padding: 2px;
    -webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
    #how-many{width: auto;}
}
#how-many {
    width: 20px;
    text-align: center;
}

JavaScript

$('.substract-value').click(function(){
    val = $('#how-many').val();
    if (val == 1) { }
    else
        $('#how-many').val(val-1);
    
     setWidth();
});
$('.add-value').click(function(){
    val = $('#how-many').val();
    $('#how-many').val(parseInt(val)+1);
    setWidth();
});
                

 var oneLetterWidth = 10;

 var minCharacters = 2;

 function setWidth() {
     var len = $("#how-many").val().length;
     if (len > minCharacters) {
         // increase width
         $("#how-many").width(len * oneLetterWidth);
     } else {
         // restore minimal width;
         $("#how-many").width(50);
     }
 }