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>`
Might not be the exact solution, but a possibility:
If you use bootstrap, you can add a tooltip to option.

```
<select>
  <option title="P1" data-toggle="tooltip" data-placement="bottom">Long name</option>
</select>

```