Homogenizing button heights for responsive displays (CSS) - css

Question

I have two buttons in my template like so:
I'm trying to ensure they remain symmetrical in size (height and width) over smaller screens. Yet, as screen width decreases, this happens:
How do ensure the Foo button is the same height as the Bar Foo Bar button even over smaller screen sizes? Looking for the simplest, purely CSS-based solution.
My current CSS looks like this:
<style>
div.tab {
overflow: hidden;
background-color: white;
text-align:center;
display:inline-block;
width:95%;
max-width:400px;
padding:5px;
}
div.tab button {
background-color: #eeeeee;
float: left;
padding: 0.5em;
border: none;
width:49.5%;
}
div.tab button:hover{
border-bottom: 2px solid #ffa726;
color:#fb8c00;
}
</style>
<div class="tab">
<button>Foo</button>
<button style="float:right;border-bottom: 2px solid #ffa726;color:#fb8c00;background-color:#fff3e0;"><b>Bar Foo Bar</b></button>
</div>
Using display:flex in div.tab results in this:

Answer 1

You can achieve that by using display: flex:
div.tab {
overflow: hidden;
background-color: white;
text-align: center;
display: inline-block;
width: 95%;
max-width: 400px;
padding: 5px;
display: flex; /*here*/
}
div.tab button {
background-color: #eeeeee;
float: left;
padding: 0.5em;
border: none;
width: 49.5%;
}
div.tab button:hover {
border-bottom: 2px solid #ffa726;
color: #fb8c00;
}
<div class="tab">
<button>Foo</button>
<button style="float:right;border-bottom: 2px solid #ffa726;color:#fb8c00;background-color:#fff3e0;"><b>Bar Foo Bar</b></button>
</div>
Giving that you are using links as child elements, the solution is display-table:
div.tab {
overflow: hidden;
background-color: white;
text-align: center;
width: 95%;
max-width: 400px;
padding: 5px;
display: table;
}
div.tab a {
display: table-cell;
width: 1%;
height: 100%;
}
div.tab a button {
padding: 0.5em;
border: none;
vertical-align: middle;
width: 98%;
background-color: #eeeeee;
display: inline-block;
height: 100%;
}
div.tab button:hover {
border-bottom: 2px solid #ffa726;
color: #fb8c00;
}
<div class="tab">
<a href="#/">
<button>Foo</button>
</a>
<a href="#/">
<button style="border-bottom: 2px solid #ffa726;color:#fb8c00;background-color:#fff3e0;"><b>Bar Foo Bar</b></button>
</a>
</div>