Linear height causing uneven divs

Question

I would like the two divs sitting next to each other and aligned at the bottom. I have a button, and when I set the linear height, it drops a little. I will give an example with images.

What I want:

What's happening:

The following code shows a fall:

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 that the text in the button is aligned and that the line-height creates a bubble around itself. Any ways to align them?

Answer 1

Add vertical-align:bottomto .div2(and / or .div1):

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

codepen example

The default vertical alignment for inline elements is the base level that you see.