How to align components within p:selectOneMenu

Question

I am trying to make the "components" of a PrimeFaces SelectOneMenu right aligned to fit the general look and feel of a form.

It works for the selectItems but the selected one has some kind of offset is there a way to fix this besides hardcoding the position in px?

The following is the code for one row within a form and the css I added to get the values right aligned by adding the css the values are in fact aligned to the right of the SelectOneMenu but like you can see in the picture the selected value has a big margin on the right side

<p:column style="vertical-align:top;padding-top:8px">
    <p:panelGrid id="tdkDetailsPanel" styleClass="hardwareDetailsPanel" columns="2">
<h:outputLabel value="Item: " />
<p:selectOneMenu value="#{backingBean.selectedItemId}">
  <f:selectItems value="#{backingBean.availableItemIds}" />
  <p:ajax update="itemDetailsPanel" />
</p:selectOneMenu>
<!-- more of the same -->
</p:panelGrid>
</p:column>

---

.ui-selectonemenu {
    width: 100% !important;
    text-align: right !important;
}

.ui-selectonemenu-panel {
    text-align: right !important;
}

.ui-selectonemenu-list-item {
    text-align: right !important;
}

.ui-selectonemenu-label {
    text-align: right !important;
}

Answer 1

I solved my problem by using

<h:selectonemenu>

instead of

<p:selectonemenu>

adding the text-align property to this gave me the desired result

Answer 2

The following code works for me:

.ui-selectonemenu .ui-selectonemenu-label {
    text-align: right;
}