Ho do I group HTML select option text into columns

Question

I have an HTML select options with text I would like to group into columns that are aligned. I tried using inline-block:

<select>
  <option><span div="display:inline-block;width:3em;">A:</span><span style="display:inline-block;width:5em;">Lorem Ipsum</span>
  </option>
  <option><span div="display:inline-block;width:3em;">AA:</span><span style="display:inline-block;width:5em;">Fusce efficitur ante</span>
  </option>
</select>

I want to get the output:

A   Lorem Ipum
AA  Fusce efficitur ante

Is there any Twitter Bootstrap for this?

Answer 1

Unfortunately, we can't set the style for option element, except to background-color and color.

But we can try to use   and monospaced font like courier.

select, option {
  font-family: courier;
}

<select>
  <option>A:&nbsp;&nbsp;Lorem Ipsum</option>
  <option>AA:&nbsp;Fusce efficitur ante</option>
</select>