How to show selectOneMenu that occupy the entire width of the column in Primefaces

Question

I need to display the selectOneMenu correctly and that the arrow is not placed between the text as it happens now. This is not pretty to look at.

I send you the following image where you can see the wrongly placed selectOneMenu arrow. Example-Image

I have the following code below:

<h5>Filters</h5>
<div class="p-formgroup-inline">
    <div id="divTest1" class="p-field">
        <p:outputLabel for="test1" class="p-col">#{sms['text.test1']}</p:outputLabel>
    </div>
    <div class="p-field">
        <p:selectOneMenu id="test1" value="#{testViewController.test1IdFilter}" styleClass="wp100" effect="fade" filter="true" filterMatchMode="contains">
            <f:selectItem itemLabel="#{sms['select.option']}" itemValue="" noSelectionOption="true"/>
            <f:selectItems value="#{selectorTest1Controller.entities}" />
            <p:ajax event="valueChange" listener="#{testViewController.filterFields}" update=":form"/>
        </p:selectOneMenu>
    </div>
    <div id="divTest2" class="p-field">
        <p:outputLabel for="test2" class="p-col">#{sms['text.test2']}</p:outputLabel>
    </div>
    <div class="p-field">
        <p:selectOneMenu id="test2" value="#{testViewController.test2IdFilter}" styleClass="wp100" effect="fade" filter="true" filterMatchMode="contains">
            <f:selectItem itemLabel="#{sms['select.option']}" itemValue="" noSelectionOption="true"/>
            <f:selectItems value="#{selectorTest2Controller.entities}" />
            <p:ajax event="valueChange" listener="#{testViewController.filterFields}" update=":form"/>
        </p:selectOneMenu>
    </div>
</div>