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:7px;
    text-align: center;
}

JavaScript

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

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

function updateWidth(){
    size = $('#how-many').val().length;
    size = size*7; // average width of a char is 7px
    $('#how-many').css('width',size);  
}