How to prevent text from wrapping under inserted element?

Question

I am working with an existing markup little of which I can change (Scenario 1)
JSFiddle .

 .container { width: 340px; border: 1px solid yellow; margin-bottom: 20px; } .title a { font: 32px/normal 'Segoe UI Light', Arial; line-height: 1.2em; text-decoration: none; color: #606060; } span.bb { border: 1px solid red; width: 30px; height: 30px; margin-right: 12px; display: inline-block; cursor: pointer; vertical-align: bottom; } 

 <div class="container"> <h2 class="title"> <!-- following span tag is added at runtime --> <span class="bb"></span> <a href="http://test.com" target="_blank"> Lorem ipsum dolor sit amet, consectetur adipisicing elit </a> </h2> </div> 

I want to insert a fixed sized span tag which works great as long the existing text fits on a single line (Scenario 2). If the existing text spans multiple lines, it wraps under the span tag that I inserted (Scenario 3).

I want to prevent text from wrapping under the span tag and want the subsequent lines to align with the first word of the sentence.

I tried couple of approaches, but didn't get the solution quite right without loosing the wrapping ability or breaking existing scenarios.

I would prefer a CSS solution for fixing this layout problem.

Answer 1

I got this working by adding following additional styles

span.bb {
    float:left;
}

span.bb + a {
    display: block;
    margin-left: 42px;    
}

http://jsfiddle.net/anunay/3bqLq/