how to set bottom of inline-block element at the bottom of block element

Question

suppose i have following html and css code:

 .something{ width: 200px; } .display-block { display: block; } .req-field{ float: right; font-size: 5px; } 

 <div class="something"> <span class="display-block">First name:<span class="req-field">required</span></span></div> 

as you can see that 'required' text is floating up compared to 'first name'. if i want 'required' text too have bottom to touch the bottom of display-block span

Answer 1

You can use line-height to adjust the height.

 .something { width: 200px; } .display-block { display: block; font-size: 18px; } .req-field { float: right; font-size: 9px; height: 20px; line-height: 29px; } 

 <div class="something"> <span class="display-block">First name:<span class="req-field">required</span></span></div>