Question

Markup

<div>
    <label class="form-label-medium">Full Notice Text</label>
    <span id="FullNoticeText">
        Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Vestibulum urna metus, placerat eleifend
        tincidunt at, posuere feugiat risus. Integer posuere commodo
        magna et consectetur. Maecenas laoreet ultricies tempor. 
        Ut turpis dolor, suscipit vitae egestas vitae, euismod a
        lorem. Cras porta malesuada leo ac faucibus.
    </span>
</div>

CSS

div{
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.form-label-medium{
    font-weight: bold;
    display:inline-block;
    width: 150px;
}

This gives me this: http://jsfiddle.net/naveen/ujkJ5/ which is not what i want.

The problem is that lengthy span that gets wrapped flows underneath my label from the second line.
What I would like is to make each line of span keep 150px distant from the label so that all the lines are lined up in the same line as L in Lorem.

Hope I am clear. What could be done?

Answer 1

Set .form-label-medium to float: left, then add:

#FullNoticeText {
    display: block;
    overflow: hidden    
}

See: http://jsfiddle.net/ujkJ5/8/