Align the numbers in the list to be aligned towards right

<style type="text/css">
ul.itemizedlist {
list-style-type: none;
margin-left: 0.8em;
}

ul.itemizedlist li.item {
list-style: none;
}
.item{
display:inline-block;
  width:303px; /* make it whatever u want */
  text-align:right;
}


.itemizedlist li.item div.para span.item-num {
margin-left: -0.5em;

text-indent: 0em;
margin-right: 0em;
}
</style>

<div id="test">
<ul class="itemizedlist">
<li class="item">
<div class="para"><span class=item-num>(i)</span> Item desc</div>
</li>

<li class="item">
<div class="para"><span class=item-num>(ii)</span> Item desc</div>
</li>

<li class="item">
<div class="para"><span class=item-num>(iii)</span> Item desc</div>
</li>

<li class="item">
<div class="para"><span class=item-num>(iv)</span> Item desc</div>
</li>

<li class="item">
<div class="para"><span class=item-num>(v)</span> Item desc</div>
</li>

<li class="item">
<div class="para"><span class=item-num>(vi)</span> Item desc</div>
</li>

<li class="item">
<div class="para"><span class=item-num>(vii)</span> Item desc</div>
</li>

<li class="item">
<div class="para"><span class=item-num>(viii)</span> Item desc</div>
</li>
</ul>
</div>

Output :)