Question: This is what my HTML looks like:

```
<select>
  <option>Long name <span>P1</span></option>
  <option>Peter <span>P2</span></option>
  <option>Hugo <span>K4</span></option>
</select>

```

I would like to display select options like this:

```html
Longname             P1
Petr                 P2
Hugo                 K4

```

codes (P1, P2, P4) aligned to the right side of select, conditions - I don't know length of longest name and I would prefer not to set exact width to any part of text

Answer: 
<http://jsfiddle.net/Tobsta/Lpb092gd/2/>

CSS styled `<ul>` with a function that sends its selected value to a `display: none;` `<select>`
Technically you can use a html entity - `&nbsp;` - non-breaking space [msdn](https://msdn.microsoft.com/en-us/library/ms537495(v=vs.85).aspx), [wiki](http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references). This is very, very wrong - first every option element must have the same number of characters and also it works correctly only if the font is monospaced [wiki](http://en.wikipedia.org/wiki/Monospaced_font).

So, **yes**, you must use a custom select box. There are a lot, just a little search is needed.

This, [jsfiddle.net/ha4p1440](http://jsfiddle.net/ha4p1440/), is working in chrome, but in other browsers is misaligned.

```
<select>
   <option>Long name P1</option>
   <option>Peter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;P2</option>
   <option>Hugo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;K4</option>
</select>

```

Here, [jsfiddle.net/ha4p1440/1](http://jsfiddle.net/ha4p1440/1/), the font is set to 'Courier' and it should look the same in every browser (I've tried it in IE9).

```
select {
    font-family: 'Courier',serif;
}

```