html - Line-height causing uneven divs -

i 2 divs sit beside each other , aligned @ bottom. have button , when set line-height on drops slightly. i'll show example images.

what desire:

what happening:

the following codepen shows drop:

http://codepen.io/basickarl/pen/kvxqxr?editors=110

html:

<div class="div1">   hello<br>   hello<br>   hello<br>   hello<br>   hello<br>   hello<br> </div> <div class="div2">   <button class="butt">push meh</button> </div> 

css:

.div1 {   display: inline-block;   background: red; } .div2 {   display: inline-block;   background: lime; } .butt {   line-height: 40px;   background: lightblue; } 

i understand text in button aligned , line-height creates kind of bubble around it. ways them aligned anyhow?

add vertical-align:bottom .div2 (and/or .div1):

.div2 {   display: inline-block;   background: lime;   vertical-align:bottom; } 

codepen example

the default vertical alignment inline elements baseline, you're seeing.