Align Font Awesome icon vertically centred and to left of table - css

Question

I am trying to position a font-awesome icon to the left of a table element, such that it is vertically centred against the table.
This is what I have at the moment:
HTML
<div class="dates">
<i class="fa fa-calendar fa-4x" aria-hidden="true"></i>
<table>
<tbody>
<tr>
<td>24th Jul 2018</td>
<td>7PM</td>
</tr>
<tr>
<td>25th Jul 2018</td>
<td>7PM</td>
</tr>
<tr>
<td>26th Jul 2018</td>
<td>7PM</td>
</tr>
<tr>
<td>27th Jul 2018</td>
<td>1PM / 7PM</td>
</tr>
</tbody>
</table>
</div>
CSS
.dates {
border: 3px solid black;
display: inline-block;
padding: 8px 0;
border-radius: 10px;
background-color: white;
border-color: grey;
.fa {
vertical-align: middle;
}
table {
display: inline-block;
td {
font-weight: bold;
margin: 0;
padding: 0 10px;
}
}
}
And it's giving me this result:

Answer 1

Add display: inline-block and vertical-align: middle to both the icon and table, like so:
(For the purposes of the demo I unnested your Sass into normal CSS.)
.dates {
border: 3px solid black;
display: inline-block;
padding: 8px 0;
border-radius: 10px;
background-color: white;
border-color: grey;
}
.fa {
display: inline-block;
vertical-align: middle;
}
table {
display: inline-block;
vertical-align: middle;
}
td {
font-weight: bold;
margin: 0;
padding: 0 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="dates">
<i class="fa fa-calendar fa-4x" aria-hidden="true"></i>
<table>
<tbody>
<tr>
<td>24th Jul 2018</td>
<td>7PM</td>
</tr>
<tr>
<td>25th Jul 2018</td>
<td>7PM</td>
</tr>
<tr>
<td>26th Jul 2018</td>
<td>7PM</td>
</tr>
<tr>
<td>27th Jul 2018</td>
<td>1PM / 7PM</td>
</tr>
</tbody>
</table>
</div>