I'm trying to get two divs to sit next to each other and be aligned at the bottom. However, when I add a button and set the line-height, it drops slightly. See examples with images below.
My Desired Layout:
https://i.sstatic.net/MZQvg.png
Current Issue:
https://i.sstatic.net/IbRS2.png
You can see the issue in action on CodePen:
http://codepen.io/basickarl/pen/KVXqxR?editors=110
HTML Setup:
<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 Styling:
.div1 {
display: inline-block;
background: red;
}
.div2 {
display: inline-block;
background: lime;
}
.butt {
line-height: 40px;
background: lightblue;
}
I've noticed that the text inside the button is causing alignment issues due to the line-height. Any suggestions on how to resolve this?