Align single and double-line containers - html

Question

I have a header row where some of the header names are too long to fit on one line and have to be split. The headers are fixed height, sufficient for two lines. The text should be vertically centered.
Something like:
.container {
width: 100%;
height: 40px;
}
.pill {
display: inline-block;
width: 33%;
background-color: red;
text-align: center;
height: 40px;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill split">
Header
<br/>Two
</div>
<div class="pill">
Header Three
</div>
</div>
I can't figure out how to align all those headers correctly. Setting line-height to 40px makes the second header double-height; setting height to 40px throws them out of alignment.
Thanks!

Answer 1

So this is what I changed in your code:
Add vertical-align: middle to align the pills
Give line-height same as height for the pills other than split using the not selector:
.pill:not(.split) {
line-height: 40px;
}
In smaller displays the menu will wrap - so use float and clear them too.
Let me know your thoughts on this, thanks!
.container {
width: 100%;
height: 40px;
}
.pill {
display: inline-block;
vertical-align: middle;
float: left;
width: 33%;
background-color: red;
text-align: center;
height: 40px;
}
.pill:not(.split) {
line-height: 40px;
}
.pill:after{
content: '';
display: block;
clear: both;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill split">
Header
<br/>Two
</div>
<div class="pill">
Header Three
</div>
</div>

Answer 2

Flexbox can do that:
.container {
width: 100%;
height: 40px;
display: flex;
}
.pill {
display: flex;
flex: 0 0 30%;
margin: 0 1%;
justify-content: center;
align-items: center;
text-align: center;
background-color: red;
height: 40px;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill split">
LONG HEADER TEXT GOES HERE
</div>
<div class="pill">
Header Three
</div>
</div>

Answer 3

One option is change the way you are setting the elements side by side, so instead of inline-block:
Table-cell
.container {
width: 100%;
height: 40px;
}
.pill {
padding:10px;
border:1px solid white;
display: table-cell;
width: 33%;
background-color: red;
text-align: center;
height: 40px;
vertical-align:middle;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill">
Header
<br/>Two
</div>
<div class="pill">
Header Three
</div>
</div>

Answer 4

Add the following to your .pill css:
vertical-align:middle;
Here is an example