How to fix position of html element label with css?

I'm fighting with my html skin. It is based on primefaces. But there is one problem - that select component is not in the same line in toolbar.

HTML CODE:

<div class="ui-toolbar ui-widget ui-widget-header ui-corner-all ui-helper-clearfix" id="fStats:stats10Toolbar">
    <div class="ui-toolbar-group-left">Company name: 
        <span class="ui-autocomplete" id="fStats:company10">
            <input type="text" value="" autocomplete="off" class="ui-autocomplete-input ui-inputfield ui-widget ui-state-default ui-corner-all"/>
        </span>
        <img width="20" height="20" src="/javax.faces.resource/spacer/dot_clear.gif.xhtml?ln=primefaces&amp;v=5.0" alt="" />
        Employee name: 
        <span class="ui-autocomplete">
            <input type="text" value="  " autocomplete="off" class="ui-autocomplete-input ui-inputfield ui-widget ui-state-default ui-corner-all"/>
            <input type="hidden" autocomplete="off"/>
        </span>
        <img width="20" height="20" src="/javax.faces.resource/spacer/dot_clear.gif.xhtml?ln=primefaces&amp;v=5.0" alt=""/>
        Phase select:
        <div class="ui-selectonemenu ui-widget ui-state-default ui-corner-all" style="width: 48px; bottom: 0px;">
            <div class="ui-helper-hidden-accessible">
                <select tabindex="-1" name="fStats:j_idt1283_input">
                    <option value=""></option>
                    <option value="A">A*</option>
                    <option value="B">B*</option>
                    <option value="C">C</option>
                </select>
            </div>
            <div class="ui-helper-hidden-accessible">
                <input type="text" readonly="readonly"/>
            </div>
            <label class="ui-selectonemenu-label ui-inputfield ui-corner-all" style="width: 32px;">C</label>
            <div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
                <span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
            </div></div>
        <img width="20" height="20" src="/javax.faces.resource/spacer/dot_clear.gif.xhtml?ln=primefaces&amp;v=5.0" alt=""/>
        <button type="submit"  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
            <span class="ui-button-text ui-c">Generuj</span>
        </button>
    </div>
</div>

CSS:

.ui-helper-clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.ui-toolbar {
    padding: 0.2em;
    position: relative;
}

.ui-toolbar-group-left {
    float: left;
}

.ui-widget-header {
    background: none repeat scroll 0 0 #424548;
    border: 1px solid #56585c;
    color: #f9f7f7;
    font-weight: bold;
}
.ui-helper-clearfix {
    display: block;
}

.ui-autocomplete {
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: auto;
}

.ui-selectonemenu {
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: auto;
}
.ui-corner-all {
    border-radius: 4px;
}

.ui-helper-hidden-accessible {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 0;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 0;
}

.ui-selectonemenu .ui-selectonemenu-label {
    border: medium none;
    display: block;
    font-weight: normal;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}

If you will see my jsfiddle, you'll understand: http://jsfiddle.net/bv3pz8h6/

There is toolbar and select component with currently selected "C". But the "C" is like aligned to top. I can see that if I remove overflow:hidden from .ui-selectonemenu .ui-selectonemenu-label class - the component is inline, but it makes other problems when text is longer than component.

Experts, is there other way to place "C" inline? Thanks for any hints.