calendar and text not coming in a single row

Question

I have created an html stuff using bootstrap 2.3.2. The html content is rendering but the issue is that the calendar and text is coming in different row also the calendar css is breaking.

JSFiddle

html

<div class="box-content">
    <li><a href="#"> <span class="mycalendar"> <strong>NOV</strong> <span>20</span>
        </span></a>
        <strong>Name:</strong> <a href="#">Test </a><br> <strong>Since:</strong>
        17/05/2012<br> <strong>Status:</strong> <span
        class="label label-success">Approved</span></li>
</div>

My code is as given below

Can anyone please tell me some solution for this

Answer 1

You can use float:left for getting your desire situation.

Jsfiddle

Edited after comment:

For centering the element, you can use display:inline-block; and then wrap other elements by a span.

Jsfiddle