Make sort icon for table column headers remain on the same line as the text

Change-type: patch
Signed-off-by: Matthew Yarmolinsky <[email protected]>

Author: myarmolinsky

src/components/Table/TableBase.tsx

@@ -14,6 +14,7 @@ import { px } from '../../utils';
 import { CheckboxProps, Checkbox } from '../Checkbox';
 import { Pager } from '../Pager';
 import { CheckboxWrapper, TableBaseColumn, TableRow } from './TableRow';
+import { Flex } from '../Flex';
 
 const highlightStyle = `
 	background-color: ${theme.colors.info.light};
@@ -586,16 +587,18 @@ export class TableBase<T> extends React.Component<
 													primary={sort.field === item.field}
 													onClick={this.toggleSort}
 												>
-													{item.label || item.field}
-													&nbsp;
-													<FontAwesomeIcon
-														icon={faSort}
-														color={
-															sort.field === item.field
-																? theme.colors.info.main
-																: ''
-														}
-													/>
+													<Flex alignItems="center">
+														{item.label || item.field}
+														&nbsp;
+														<FontAwesomeIcon
+															icon={faSort}
+															color={
+																sort.field === item.field
+																	? theme.colors.info.main
+																	: ''
+															}
+														/>
+													</Flex>
 												</HeaderButton>
 											</div>
 										);