CSS将选定文本的一部分对齐到右侧

Question

这就是我的HTML的样子:

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

我想显示如下选择选项:

Longname             P1
Petr                 P2
Hugo                 K4

代码(P1,P2,P4)对齐选择的右侧,条件 - 我不知道最长名称的长度,我宁愿不设置文本的任何部分的确切宽度

Answer 1

<select>
  <option>
    <span style="float: left">Long name </span>
    <span style="float: right">P1</span>
  </option>
</select>