Disposition of HTML-Select having UTF-Icons
The UTF character is taller than the text, so it is displacing the select box.
I've added a bit of CSS to fix it - vertical-align: middle to line the select boxes up with each other; and line-height: 1.75em to make the character visible.
select { vertical-align: middle; height: 1.75em;}<select> <option>🏢Foo</option></select><select> <option>Foo</option></select>
Try this.
select { display: inline-block; vertical-align: middle;}<select> <option>🏢Foo</option></select><select> <option>Foo</option></select>
This will solve your issue with the disposition of the two select elements. The trick was to give them position:relative; and float:left; which you can confirm by removing the height and margin-right and re-running:
.lineEmUp{ position:relative; float:left; height:28px; margin-right:5px;}<select class="lineEmUp"> <option>🏢Foo</option></select><select class="lineEmUp"> <option>Foo</option></select>