Align text baseline with a button in CSS

Question

I would like to achieve one of the two alignments represented on this image: . CSS3 is ok or even better if it makes things simpler.

My main problem is that I managed to align one div containing the text with the button, but the text itself is aligned with the top of the div and not the bottom.

Answer 1

I think what you're after is vertical-align: text-bottom;

http://jsfiddle.net/EQgFF/3/

p.box {
    color:#fff;
    background:#444;
    width:400px;
    line-height: 40px;
}

span { background: #666; }

input { vertical-align: text-bottom; border: 1px solid #CCC; height: 24px; }

<p class="box"><span>some text</span> <input type="button" value="Button"/></p>