How to set a width in span tag in html

Question

I am displaying a vertical bar with differernt color on different width basis but it shows me a fixed width even though i change width

<span style="position:relative;border-left:solid;left:0px;top:0px;width:550px;height:18px;clip:rect(0,550px,18px,0);background-color:#f0f0f0;overflow:hidden; border:1px solid #000000;"></span> 
<span style="position:relative;border-left:solid;left:0px;top:0px;width:350px;height:18px;clip:rect(auto,auto,auto,auto);background-color:#FFFFFF;overflow:hidden; border:1px solid #000000;"> </span>

---

Answer 1

You may refer following example

<ul>
<li><span>&nbsp;</span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
</ul>

ul 
{
list-style-type: none;
padding-left: 0px;
}

ul li span { 
float: left;
width: 40px;
}

http://jsfiddle.net/laurensrietveld/JZ2Lg/

Or use display: block; and then give width