I'm currently working on a horizontal navigation that includes both icons and text for each item. The problem I'm facing is when an item has two lines of text compared to just one line. I've attempted adjusting the padding and height of the div in question, but so far, it hasn't produced the desired outcome. What steps can I take to ensure a consistent height for all navigation items regardless of text length?
For a live demo, check out this 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;
}