Change 3 fields from vertical to horizontal nicely in Primefaces - html

Question

I would like to have the following fields horizontally, side by side. I can't get this to stay horizontal and this isn't pretty.
Currently, I have the following fields vertically (see attached image)
<div class="card">
<div class="card">
<h5>Filters</h5>
<div class="field col-12 md:col-6">
<p:outputLabel for="test1" class="p-col-12 p-md-1">#{sms['test.test1']}</p:outputLabel>
<div class="p-col-12 p-md-11">
<p:selectOneMenu id="test1" value="#{testView.test1IdFilter}" styleClass="wp15">
<f:selectItem itemLabel="#{sms['selection.option']}" itemValue="" noSelectionOption="true"/>
<f:selectItems value="#{selectorTest1Controller.entities}" />
<p:ajax event="valueChange" listener="#{testView.filterTests}" update=":form"/>
</p:selectOneMenu>
</div>
</div>
<div class="field col-12 md:col-6">
<p:outputLabel for="test2" class="p-col-12 p-md-1">#{sms['test.test2']}</p:outputLabel>
<div class="p-col-12 p-md-11">
<p:selectOneMenu id="test2" value="#{testView.test2IdFilter}" styleClass="wp15">
<f:selectItem itemLabel="#{sms['selection.option']}" itemValue="" noSelectionOption="true"/>
<f:selectItems value="#{selectorTest2Controller.entities}" />
<p:ajax event="valueChange" listener="#{testView.filterTests}" update=":form"/>
</p:selectOneMenu>
</div>
</div>
<div class="field col-12 md:col-6">
<p:outputLabel for="test3" class="p-col-12 p-md-1">#{sms['test.test3']}</p:outputLabel>
<div class="p-col-12 p-md-11">
<p:selectOneMenu id="test3" value="#{testView.test3IdFilter}" styleClass="wp15">
<f:selectItem itemLabel="#{sms['selection.option']}" itemValue="" noSelectionOption="true"/>
<f:selectItems value="#{selectorTest3Controller.entities}" />
<p:ajax event="valueChange" listener="#{testView.filterTests}" update=":form"/>
exemple-image