Align one word to left & one word to right in SELECT OPTION

Problem

I am filling data in Select Option from c# code by merging two words. Now I want one word as left align & another as right. How to do that?

I want output like below:

MD1        LAPTOP
MD2        MOUSE
MD311      KEY-BOARD
MD45       HARD DISK

or

MD1           LAPTOP
MD2            MOUSE
MD311      KEY-BOARD
MD45       HARD DISK

Note: I need list SELECT OPTION just because by clicking on the Item I want to display details of selected OPTION ITEM.

Problem courtesy of: Dhwani

Solution

Maybe you can try word-spacing:

<select name="mySelect">
    <option value="1">MD1 LAPTOP</option>
    <option value="2">MD2 MOUSE</option>
    <option value="3">MD3 KEY-BOARD</option>
    <option value="4">MD4 HARD DISK</option>
</select>

...

select, option {
    word-spacing:20px;
}

Example: http://jsfiddle.net/Ck9d8/1/

Solution courtesy of: MelanciaUK

Discussion

You can put each word into a container, wether it's a div or a spain and put some classes in them to handle them with CSS. The simplest way to do this is by assigning a prefixed width to the left span. For example:

HTML:
<span class="left">MD1</span><span class="right">LAPTOP</span><br/>
<span class="left">MD2</span><span class="right">LAPTOP</span><br/>
<span class="left">MD3</span><span class="right">LAPTOP</span><br/>
<span class="left">MD4</span><span class="right">LAPTOP</span><br/>
<span class="left">MD5</span><span class="right">LAPTOP</span><br/>

CSS:
.left{
     display:inline-block;
     width: 100px;
}

A working fiddle: http://jsfiddle.net/f7J8k/

You can also do it with display:table on a container div and display:table-row and display:table-cell for each "row" and "cell" and then set the space between cells, this will allow you to have a more flexible layout, but it's more complicated.

Or, since it's tabular data, just use a table.

Discussion courtesy of: danielrozo

Simply use required space between your option value like;

<select>
    <option>MD1 &nbsp;&nbsp; LAPTOP</option>
    <option>MD2 &nbsp;&nbsp; MOUSE</option>
    <option>MD3 &nbsp;&nbsp; KEY-BOARD</option>
    <option>MD4 &nbsp;&nbsp; HARD DISK</option>
</select>

See: http://jsfiddle.net/f7J8k/2/

Discussion courtesy of: Parkash Kumar

This recipe can be found in it's original form on Stack Over Flow.