here is your solution: http://jsfiddle.net/mYQZp/
HTML
<div class="container">
<div>
<span class="step-a">STEP 3.</span><span class="step-b">This line is ok.</span>
</div>
<div>
<span class="step-a">STEP 4.</span><span class="step-b">I don't like the way this wraps</span>
</div>
<div>
<span class="step-a">STEP 5.</span><span class="step-b">This line is ok.</span>
</div>
<div class="clear"></div>
</div>
CSS
.step-a {
display:block;
width:50px;
color:#3498DB;
font-size: 14px;
padding-top:2px;
text-transform:capitalize;
vertical-align:baseline;
float:left;
}
.step-b {
display:block;
width:90px;
color:#8e8e93;
font-size: 16px;
vertical-align:baseline;
padding-left:10px;
float:left;
}
.step-b:after {
content:"\A"; white-space:pre; }
.clear{clear:both; height:1px;}
.container{display: block; width:175px; background:#f2f2f2; padding:10px;}