HTML - Get consistent height across inline-block divs - html

Question

I am creating a horizontal navigation with an icon and text for each navigation item. I am running into an issue with items that contain two lines of text vs one.
I have tried modifying the padding and height of the div that extends higher than the others, but to no avail. How can I modify this to achieve a consistent height across all navigation items regardless of lines of text?
View the fiddle: Here
<div id="dashboard">
<a class="actions" href="#">
<div>
<i class="fas fa-users"></i> <br />Employees
</div>
</a>
<a class="actions" href="#">
<div>
<i class="fas fa-pencil-ruler"></i> <br />Check Stats
</div>
</a>
<a class="actions" href="#"">
<div>
<i class="fas fa-table"></i> <br />Generate Census
</div>
</a>
<a class="actions" href="#">
<div>
<i class="fas fa-paper-plane"></i> <br />Send Forms
</div>
</a>
<a href="#" class="actions" data-toggle="modal" data-target="#deleteClientModal">
<div>
<i class="fas fa-trash-alt"></i> <br />Delete
</div>
</a>
</div>
.actions:first-child div {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.actions:last-child div {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.actions > div {
display: block;
background-color: #fafafa;
color: #223a5c;
border: 1px solid #d6d8db;
padding: 15px 0;
margin: 0 -6px 20px 0;
width: 12.5%;
text-align: center;
display: inline-block;
}
.actions > div:hover {
background-color: #f2f2f2;
}
.actions > div i {
width: 1em;
font-size: 2em;
}

Answer 1

A flexbox solution might look something like this:
#dashboard {
display: flex;
}
div:first-child>.actions>div {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
div:last-child>.actions>div {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.actions>div {
background-color: #fafafa;
color: #223a5c;
border: 1px solid #d6d8db;
padding: 15px 15px;
text-align: center;
}
.actions>div:hover {
background-color: #f2f2f2;
}
.actions>div i {
width: 1em;
font-size: 2em;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div id="dashboard">
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-users"></i> <br />Employees
</div>
</a>
</div>
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-pencil-ruler"></i> <br />Check Stats
</div>
</a>
</div>
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-table"></i> <br />Generate Census
</div>
</a>
</div>
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-paper-plane"></i> <br />Send Forms
</div>
</a>
</div>
<div>
<a href="#" class="actions" data-toggle="modal" data-target="#deleteClientModal">
<div>
<i class="fas fa-trash-alt"></i> <br />Delete
</div>
</a>
</div>
</div>