Question

I’m having problem in alignment of a div. Please see following html. I have basically a form fiend with label and input field, and a <p> on the right of the input field. For some of the fields, the <p> element has small text, which fits on same line. But for some fields, it has more text which goes to 2 or 3 lines.
How can I set the CSS of the <p> element that if its only one one line, then it should be displayed in the middle the input field, but if the text is over one line then it just goes up.
Hope my question is clear. Thanks for any help.

HTML:

<div class="container">
<label>Label</label><input class="input" />
    <p>Lorem ipsum dolor.  </p>
</div>

CSS:

.container{
border:1px solid black;
    padding:20px;
    float:left;
}
label{
    line-height:2.5;
    float:left;
    border:1px solid green;
    width:60px;
    margin-right:10px;
}

input{
    border:1px solid green;
    height:34px;
    padding:4px 6px;
    width:200px;
    float:left;
    margin-right:10px;
}

p{
border:1px solid red;
    float:left;
    width:150px;
    line-height:15px;

}

jsFiddle:
http://jsfiddle.net/JFjx4/

Answer 1

Please, explain what you mean “it should be displayed in the middle the input field”? May be what you need is jsfiddle. I replaced ‘float: left’ in ‘LABEL INPUT P’ with ‘display: inline-block’ and added ‘vertical-align: middle’ in ‘P’.

@Grigor: “text-wrap” is css3 feature. It can be inappropriate for @Roman.