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


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


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


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, option {


Solution courtesy of: MelanciaUK


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:

<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/>

     width: 100px;

A working fiddle:

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;

    <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>


Discussion courtesy of: Parkash Kumar

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