CSS Content Flex

Question

I would like to create a table where each column header contains a column name and a sort symbol. To do this, I'm using bootstrap. You can see my code below:

.glyphicon-menu-down,
.glyphicon-menu-up {
 display: block!important;
 font-size: 9px;
}
th {
 background-color: #0C69E8;
}
th {
 color: white;
}
th .align {
 display: flex;
 align-items: center;
}
.pointer {
 cursor: pointer;
}

<div class="container" align="center">
 <table class="table">
 <thead>
 <tr>
 <th scope="col">#</th>
 <th scope="col" class="pointer">
 <div style="float:left; margin-right:10px;">First</div>
 <div>
 <div id="up" class="glyphicon glyphicon-menu-up"></div>
 <div id="down" class="glyphicon glyphicon-menu-down"></div>
 </div>
 </th>
 <th scope="col" class="pointer">
 <div class="align">
 <div style="margin-right:10px">Last</div>
 <div class="glyphicon glyphicon-menu-up">
 <div class="glyphicon glyphicon-menu-down"></div>
 </div>
 </div>
 </th>
 <th scope="col" class="pointer">
 <div class="align">
 <div style="margin-right:10px">Handle</div>
 <div class="glyphicon glyphicon-menu-up">
 <div class="glyphicon glyphicon-menu-down"></div>
 </div>
 </div>
 </th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th scope="row">1</th>
 <td>Mark</td>
 <td>Otto</td>
 <td>@mdo</td>
 </tr>
 <tr>
 <th scope="row">2</th>
 <td>Jacob</td>
 <td>Thornton</td>
 <td>@fat</td>
 </tr>
 <tr>
 <th scope="row">3</th>
 <td>Larry</td>
 <td>the Bird</td>
 <td>@twitter</td>
 </tr>
 </tbody>
 </table>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

My solution is to use a display flex on the headers column and 2 bootstrap glyphicons. If I don't use a flex display, the elements are not on the same line. I think my solution is not really clean so if someone had a better solution, I'll take it. Could someone give me his opinion on the code?

Thanks for any help