<p>Within an unordered list:</p>

<pre><code>&lt;li&gt;&lt;span&gt;&lt;/span&gt; The lazy dog.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;AND&lt;/span&gt; The lazy cat.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;OR&lt;/span&gt; The active goldfish.&lt;/li&gt;
</code></pre>

<p>Adding a class or style attribute is permitted but padding the text and adding or changing tags is not allowed.</p>

<p>The page is rendering with Courier New.</p>

<p>Goal is to have text after span lined up.</p>

<pre><code>    The lazy dog.
AND The lazy cat.
OR  The active goldfish.
</code></pre>

<p>Justification of the "OR" is unimportant.</p>

<p>The lazy animal text may be wrapped in an additional element but I'll have to double check.</p>

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

ul li span {
  float: left;
  width: 40px;
}
```
```
```
```
<ul>
  <li><span></span> The lazy dog.</li>
  <li><span>AND</span> The lazy cat.</li>
  <li><span>OR</span> The active goldfish.</li>
</ul>
```
```
Like Eoin said, you need to put a non-breaking space into your "empty" spans, but you can't assign a width to an inline element, only padding/margin so you'll need to make it float so that you can give it a width.
For a jsfiddle example, see
http://jsfiddle.net/laurensrietveld/JZ2Lg/