Indenting 2nd line of text only

Question

I have 2 spanned text styles, One overflows onto a 2nd line and I'm trying to figure out how I can indent the 2nd line only. Does anyone have a solution that doesn't require me putting them in their own containers?

<span class="step-a">STEP 3.</span><span class="step-b">This line is ok.</span>
<span class="step-a">STEP 4.</span><span class="step-b">I don't like the way this wraps</span>
<span class="step-a">STEP 5.</span><span class="step-b">This line is ok.</span>

.step-a { display:inline; color:#3498DB; font-size: 14px; text-transform:capitalize; vertical-align:baseline; } 
.step-b { display:inline; color:#8e8e93; font-size: 16px; vertical-align:baseline; padding-left:10px; } 
.step-b:after { content:"\A"; white-space:pre; }

Answer 1

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;}