css - How to achieve two different alignments inside a html option tag? -

I have a select HTML tag with country calling code.

  & lt; Select Name = "Country Coding Code" id = "Country Coding" & gt; & Lt; Option value = "1" & gt; & Lt; Span class = "name" & gt; Afghanistan & lt; / Span & gt; & Lt; Span class = "code" & gt; + 93 & lt; / Span & gt; & Lt; / Option & gt; & Lt; Option value = "2"> gt; & Lt; Span class = "name" & gt; Albania & lt; / Span & gt; & Lt; Span class = "code" & gt; + 355 & lt; / Span & gt; & Lt; / Options & gt; & Lt; Option value = "3" & gt; & Lt; Span class = "name" & gt; Algeria & lt; / Span & gt; & Lt; Span class = "code" & gt; + 213 & lt; / Span & gt; & Lt; / Options & gt; & Lt; / Select & gt;  

I should leave the name and code to get the right alignment. Presentation should appear:

  Afghanistan +93 Albania +355 Algeria +213  

I have introduced span elements to get it with CSS .

  select country # codecoding span.name {text-align: left;} select #callingcode span.code {text-align: right;}  

The above code is not working, besides, the Span Elements do not seem valid inside an HTML option tag for XHTML 1.0 Strict.

Any thoughts?