Definition list FAQs - avoid wrapping text in <dd> tag around icon

Question

I'm using a definition list for a FAQS page and I like the semantics of it. I've got a span whose sole content is A: and I'd like the answer text to not wrap around the span. I've only been able to make it either wrap, or jump to a new line. I've tried to experiment with the markup but that just gets messy (I'm sure this can be cleared up quite a bit). I've also tried to position it absolutely, but I can't figure out how to do it inside of the <dd> tag.

Here's what I have so far http://jsfiddle.net/nhHma/1/

And here's the markup:

<dl>

    <dt class="faqQ">How much wood could...?<span class="show_answer"></span></dt>
    <dd class="faqA"><p><span class="answer_icon">A:</span><span class="answer_text_one">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p></dd>

    <dt class="faqQ">What is the average airspeed...?<span class="expand"></span></dt>
    <dd class="faqA"><span class="answer_icon">A:</span><span class="answer_text_two">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></dd>

</dl>

dt { 
    font: normal 1em 'Droid Serif', "Lucida Grande", Lucida, Arial, Verdana, sans-serif; 
    font-weight: light;
    padding: 0;  
    margin-top: .5em; 
    display: inline-flex; 
    clear: both;
}
dd { 
    font: italic 1em 'PT Sans', 'Helvetica Neue', "Helvetica", sans-serif;
    color: darken(@mid_gray_color, 25%);
    padding-left: 1em;
    margin: .15em 0 1em 1em;
    display: block;

    .answer_icon {
        display: inline-block;
        font: italic normal 2em Times, serif;
        float: left;
        margin-right: .3em;
    }
    .answer_text_two {
        float: left;
    }
}

Thanks!

Edit: Sorry, I guess I wasnt very clear in my explanation. I'd like the text to be right of the A:, but I want it all left-justified, without wrapping underneath the A:. Does that make sense?

Like this:

A:  Lorem ipsum dolor sit amet, consectetur adipisicing elit.... 
    Placeat, esse, saepe, voluptas molestiae ex laborum ducimus cumque accusantium recusandae unde dicta sed assumenda quasi aspernatur nobis consectetur culpa aperiam perspiciatis!

Not like this:

A:  Lorem ipsum dolor sit amet, consectetur adipisicing elit.... 
Placeat, esse, saepe, voluptas molestiae ex laborum ducimus cumque accusantium recusandae unde dicta sed assumenda quasi aspernatur nobis consectetur culpa aperiam perspiciatis!

Answer 1

Do you mean like this ? :

<dl>

    <dt class="faqQ">How much wood could...?<span class="expand"></span></dt>
    <dd class="faqA"><p><span class="answer_icon">A:</span><span class="answer_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p></dd>

    <dt class="faqQ">What is the average airspeed...?<span class="expand"></span></dt>
    <dd class="faqA"><span class="answer_icon">A:</span><span class="answer_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></dd>

</dl>

dt { 
    font: normal 1em 'Droid Serif', "Lucida Grande", Lucida, Arial, Verdana, sans-serif; 
    font-weight: light;
    padding: 0;  
    margin-top: .5em; 
    display: inline-flex; 
    clear: both;

    &:after {
        content:'\bb';
        margin-left: .5em;
        color: darken(@mid_gray_color, 25%);
    }
}
dd { 
    font: italic 1em 'PT Sans', 'Helvetica Neue', "Helvetica", sans-serif;
    color: darken(@mid_gray_color, 25%);
    padding-left: 1em;
    margin: .15em 0 1em 1em;
/*      border-left: 3px solid @mid_gray_color; */
    display: block;

    .answer_icon {
        display: inline-block;
        font: italic normal 2em Times, serif;
        float: left;
        margin-right: .3em;
    }
    .answer_text {
        float: left;
        display:inline-block;
        width:400px;
        text-align:justify;
        padding-top:10px;
    }
}

http://jsfiddle.net/nucleo1985/nhHma/18/

Hope this what you looking for.

Answer 2

Try adding this to .answer_text_two in your jsfiddle: (I'm not worrying about .answer_text_one)

.answer_text_two {
        float: right;
        width: 410px;
        margin: 5px 0;
    }

The margin and specified width is only to make it look good in the jsfiddle, and can be changed depending on the size you want it on your actual page, but you get my meaning.