title: How to fix position of html element label with css?
body: <p>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.</p>
  
  <p>HTML CODE:</p>
  
  <pre><code>&lt;div class="ui-toolbar ui-widget ui-widget-header ui-corner-all ui-helper-clearfix" id="fStats:stats10Toolbar"&gt;
      &lt;div class="ui-toolbar-group-left"&gt;Company name: 
          &lt;span class="ui-autocomplete" id="fStats:company10"&gt;
              &lt;input type="text" value="" autocomplete="off" class="ui-autocomplete-input ui-inputfield ui-widget ui-state-default ui-corner-all"/&gt;
          &lt;/span&gt;
          &lt;img width="20" height="20" src="/javax.faces.resource/spacer/dot_clear.gif.xhtml?ln=primefaces&amp;amp;v=5.0" alt="" /&gt;
          Employee name: 
          &lt;span class="ui-autocomplete"&gt;
              &lt;input type="text" value="  " autocomplete="off" class="ui-autocomplete-input ui-inputfield ui-widget ui-state-default ui-corner-all"/&gt;
              &lt;input type="hidden" autocomplete="off"/&gt;
          &lt;/span&gt;
          &lt;img width="20" height="20" src="/javax.faces.resource/spacer/dot_clear.gif.xhtml?ln=primefaces&amp;amp;v=5.0" alt=""/&gt;
          Phase select:
          &lt;div class="ui-selectonemenu ui-widget ui-state-default ui-corner-all" style="width: 48px; bottom: 0px;"&gt;
              &lt;div class="ui-helper-hidden-accessible"&gt;
                  &lt;select tabindex="-1" name="fStats:j_idt1283_input"&gt;
                      &lt;option value=""&gt;&lt;/option&gt;
                      &lt;option value="A"&gt;A*&lt;/option&gt;
                      &lt;option value="B"&gt;B*&lt;/option&gt;
                      &lt;option value="C"&gt;C&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="ui-helper-hidden-accessible"&gt;
                  &lt;input type="text" readonly="readonly"/&gt;
              &lt;/div&gt;
              &lt;label class="ui-selectonemenu-label ui-inputfield ui-corner-all" style="width: 32px;"&gt;C&lt;/label&gt;
              &lt;div class="ui-selectonemenu-trigger ui-state-default ui-corner-right"&gt;
                  &lt;span class="ui-icon ui-icon-triangle-1-s ui-c"&gt;&lt;/span&gt;
              &lt;/div&gt;&lt;/div&gt;
          &lt;img width="20" height="20" src="/javax.faces.resource/spacer/dot_clear.gif.xhtml?ln=primefaces&amp;amp;v=5.0" alt=""/&gt;
          &lt;button type="submit"  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"&gt;
              &lt;span class="ui-button-text ui-c"&gt;Generuj&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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%;
  }
  </code></pre>
  
  <p>If you will see my jsfiddle, you'll understand:
  <a href="http://jsfiddle.net/bv3pz8h6/" rel="nofollow">http://jsfiddle.net/bv3pz8h6/</a></p>
  
  <p>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 <code>overflow:hidden</code> from <code>.ui-selectonemenu .ui-selectonemenu-label</code> class - the component is inline, but it makes other problems when text is longer than component.</p>
  
  <p>Experts, is there other way to place "C" inline?
  Thanks for any hints.</p>