How to vertically center align icon inside table header

Question

I have a dynamic table, with dynamic no of column and rows... In table header, I need to fix sort icon vertically center.. Even table header text size is dynamic and no of lines keeps growing... how to vertically align sort icon while text size keeps increases?

jsfiddle

<table style="width:100%">
  <tr>
    <th><div class='filter-container header-container'> <div class='header-text'>  Firstname Firstname Firstnam eFirstnam eFirstname Firstname Firstname Firstname Firstname</div><div class='icon-right'> <span    class= "fa fa-sort-asc fa-lg sort-icon "></span><span   class= "fa fa-sort-desc fa-lg sort-icon  "></span></div></div></th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

CSS:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th, td {
  padding: 5px;
}

.filter-container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0px !important;
  margin: 0px !important;
}

.header-container {
  height: 100%;
  vertical-align: middle;
  text-align: center;
}

.header-text {
  font-size: 22px;
  line-height: 24px;
  color: #000000;
  font-weight: normal;
  width: 90%;
  float: left;
  letter-spacing: 0;
  text-align: left;
}

.sort-icon {
  float: right !important;
  clear: right;
  height: 1px !important;
}

Answer 1

Use a wrapper of the entire table header cell contents. Inside it, use two elements. The text and the icon:

<th>
  <div class="aligner">
    <div class="text">any text here can be as long as you want</div>
    <div class="icon">your icon here</div>
  </div>
</th>

and use:

th .aligner {
  display: flex;
  align-items: center;
}

Obviously, both aligned elements need to have equal vertical padding, border and margins.

---

Using the example you just added, here's a starter: https://jsfiddle.net/websiter/h94yen82/

I removed your styles for the sorter and added:

.header-container {
  justify-content: space-between;
}
.sort-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 0;
}

Answer 2

Quick/simply fix, add this to .icon-right:

.icon-right {
    ...
    top: calc(50% - 8px);
    position: relative;
}

Edit

Since you want to apply this to all columns, try this:

.icon-right {/* Add this new class */
    top: calc(50% - 8px);
    position: absolute;
    right: 5px;
}

th {/* Add this new class */
    position: relative;
}

.filter-container {
    ...
    /*position: relative;*/ /* remove this line */
    ...
}

Try it jsfiddle.