Incorrect auto size column template on CSS Grid when jsf 2.1 generates an inputNumber-button xhtml

Question

I have create a jsf 2.1 page with the following content:

<h:panelGroup layout="block" id="grupodetalleCodprovincia"
 style="display: grid; grid-template-columns: auto auto 1fr;">
 <p:inputNumber value="#{cc.attrs.sptiti28Controller.mensajeDto.cabecera.codprovincia}"
 style="width: 4ch;" id="detalleCodprovincia" styleClass="campoNumero"
 minValue="0" maxValue="99" decimalPlaces="0"
 readonly="#cc.attrs.sptiti28Controller.getSoloLectura('codprovincia')}" />
 <p:commandButton
  action="#{cc.attrs.sptiti28Controller.buscardetalleCodprovinciaClick()}"
  title="#{mensajes['SPTITI28.buscarCodprovincia']}"
  update="detalleCodprovincia" icon="pi pi-search" />
  <p:inputText value="#{cc.attrs.sptiti28Controller.mensajeDto.cabecera.provincia}"
   id="detalleProvincia" styleClass="campoTexto" style="width: 52ch;"
   converter="trimConverter" maxlength="50" readonly="true" />
</h:panelGroup>

that generates roughly the following html on browser (simplified for understanding the problem)

<div style="display: grid; grid-template-columns: auto auto 1fr;">
    <span style="display: block; width: 4ch;">
        <input type="text" style="text-align: right; width: 100%;"  value="20">
        <input type="hidden" autocomplete="off">
    </span>
    <button style="width: 20px;"/>
    <input type="text" style="text-align: right; width: 100%; margin-left: 4px; width: 52ch;"/>
    </span>
</div>

The html produces a mistake, at least on chrome version 106.0.5249.103, and position the button overlapping the first input.

Execution on chrome

This behaviour doesn't show if the input changes to inputText instead of an inputNumber.

Anyone knows if there is a hack to allow the correct calculation of the column width? Anyone can explain me if there is any problem on my definition?

Best regards,