Dropdown component doesn't fit/adjust properly InputText

[eddorneles]

I have started to use PrimeReact recently, so sometimes I get stuck with some behaviors related to the grid, inline and form css styling.
I'm having an issue to make the Dropdown box adjust properly exactly like the InputText.
I don't understand the reason why the Dropdown doesn't adjust to the available space properly, and when I set its width to 100% the label goes above the Dropdown field even though they're inside the p-grid.
Here is my JSX component code, followed by my custom css and sampling screenshots:

Code: Select all

    return (
    <>
    <div className="p-formgroup-inline p-grid info-local-container">
        <div className="p-field p-grid">
            <label htmlFor="field1"  className="label-info-local">Field1</label>
            <InputText id="field1" type="text" className="input-info-local" />
        </div>
        <div className="p-field p-grid">
            <label htmlFor="field2"  className="label-info-local">Field2</label>
            <InputText id="field2" type="text"  className="input-info-local" />
        </div>
        <div className="p-field p-grid">
            <label htmlFor="field3"  className="label-info-local"
            style={{verticalAlign:"center"}}>Field3</label>
            <Dropdown 
                optionLabel="label"
                options={opcoes}
                value="value"
                onChange={onChangeDropdown}
                placeholder="select"
                autoWidth={false} />
        </div>
        <div className="p-field p-grid">
            <label htmlFor="origem"  className="label-info-local">Field4</label>
            <Dropdown 
                optionLabel="rotulo"
                options={opcoes}
                value="codigo"
                onChange={onChangeDropdown}
                placeholder="select"
                className="input-info-local" />
        </div>
        <div className="p-field p-grid">
            <label htmlFor="field5"  className="label-info-local">field5</label>
            <InputText id="field5" type="text"  className="input-info-local" />
        </div>
        <div className="p-field p-grid">
            <label htmlFor="field6"  className="label-info-local">field6</label>
            <InputText id="field6" type="text"  className="input-info-local" />
        </div>
        <div className="p-field p-grid">
            <label htmlFor="field7"  className="label-info-local">field7</label>
            <InputText id="field7" type="number"  className="input-info-local" />
        </div>
        <div className="p-field p-grid">
            <label htmlFor="field8"  className="label-info-local">field8</label>
            <InputText id="field8" type="text"  className="input-info-local"  />
        </div>
        <div className="p-field p-grid">
            <label htmlFor="field9"  className="label-info-local">field9</label>
            <InputText id="field9" type="text"  className="input-info-local" />
        </div>
        <div className="p-field p-grid">
            <label htmlFor="field10"  className="label-info-local">field10</label>
            <InputText id="field10" type="text"  className="input-info-local" />
        </div>
        <div className="p-field p-grid">
            <label htmlFor="field11"  className="label-info-local">Field11</label>
            <InputText id="field11" type="text"  className="input-info-local" />
        </div>
        <div className="p-field p-grid">
            <label htmlFor="field12"  className="label-info-local">field12</label>
            <InputText id="field12" 
                type="text"  
                className="input-info-local" />
        </div>
    </div>
    </>
    );

CSS Style

Code: Select all

.info-local-container {
    margin-left: auto;
    margin-right: auto;
}


.p-field .label-info-local {
    width: 60px;
}

.p-field .input-info-local {
    width: auto;
}

The result is like the following:
https://imgur.com/a/YEvkuX8



When I set the Dropdown's width to 100% the result is the following

Code: Select all

<Dropdown 
                optionLabel="label"
                options={opcoes}
                value="value"
                onChange={onChangeDropdown}
                placeholder="select"
                autoWidth={false} 
                style={{width: "100%"}} />

In order to have the behavior like those InputText what should I do in my styles.css?
I hope someone could be able to help, me!
I'm enjoying a lot the PrimeReact resources, components and styles so far!

Thanks in advance!