CSS align part of select text to the right [duplicate]

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:

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 1

http://jsfiddle.net/Tobsta/Lpb092gd/2/

CSS styled <ul> with a function that sends its selected value to a display: none; <select>