Align 2 :after contents below each other - html

Question

I've been experimenting with advanced selectors and it has been going great until now. I'm trying to align 2 carets below each other in a table. To make it appear like the rows are sortable. But I haven't been able to get it working and I couldn't find any information on this specific issue on google.
If anybody can help me with this or provide information, I'd appreciate it.
HTML:
<div id="table">
<table>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
<td>Column4</td>
<td>Column5</td>
<td>Column6</td>
<td>Column7</td>
<td>Column8</td>
<td>Column9</td>
<td>Column10</td>
<td></td>
</tr>
</table>
</div>
CSS:
#table tr:first-child td:not(:nth-child(9)):not(:last-child):after {
font-family: FontAwesome;
content: "\f0d7" ' ' "\f0d8";
float:right;
}
JSFIDDLE
http://jsfiddle.net/jk62x5ox/

Answer 1

#table table {
margin-top: 40px;
width: 100%;
border: none;
border-collapse: collapse;
}
#table td {
padding: 0 5px;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#table tr {
background: #dbe5f1;
}
#table td:first-child {
border-left: none;
}
#table td:last-child {
border-right: none;
padding-right: 0;
}
#table tr td:last-child:before {
font-family: FontAwesome;
content: "\f05c";
font-size: 18px;
}
#table tr:first-child td:not(:nth-child(9)):not(:last-child):after {
font-family: FontAwesome;
content: "\f0d8"' '"\f0d7";
float: right;
width: 5px;
line-height: 0.5;
}
<div id="table">
<table>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
<td>Column4</td>
<td>Column5</td>
<td>Column6</td>
<td>Column7</td>
<td>Column8</td>
<td>Column9</td>
<td>Column10</td>
<td></td>
</tr>
</table>
</div>