Select dropdown menu text split left and right?

Question

Not sure if this can be done but can I split the text in the option tags?

Example, normal styling:

<select>
    <option value="">First - A</option>
    <option value="">Car - B</option>
    <option value="">Black - C</option>
    <option value="">Super Duper - D</option>
</select>

How can I get it to look like this:

<select>
    <option value="">First       - A</option>
    <option value="">Car         - B</option>
    <option value="">Black       - C</option>
    <option value="">Super Duper - D</option>
</select>

I've tried added a span tag nested in the option tag but that didn't work

Answer 1

<option> tags do not accept HTML content. You can only pad your selections with spaces to format them.

Alternately, there are plug-in replacements for <select> that use DIVs and ULs instead of <select> that give you more flexibility.

Answer 2

The easier will be to use non proportional (monospaced) font for those boxes and then using right count of nonbreaking spaces like this:

<style>
    select{
        font-family:monospace;
    }
</style>
<select>
    <option value="">First&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- A</option>
    <option value="">Car&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- B</option>
    <option value="">Black&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- C</option>
    <option value="">Super Duper&nbsp;- D</option>
</select>