在表格中,将排序图标放置在彼此下方的正确(React/MaterialUI)方法

我在一个应用程序中使用以下代码 tsx 组成部分。我还不熟悉这本书 correct layout options .
我有一个 working sandbox .

import React from "react";
import { ArrowDropUp, ArrowDropDown } from "@material-ui/icons";
import { withStyles } from "@material-ui/core/styles";

function SvgMaterialIcons(props) {
  const { classes } = props;
  return (
    <table>
      <thead>
        <tr>
          <td>
            TITLE <ArrowDropUp /> <ArrowDropDown />
          </td>
        </tr>
        <tr>
          <td>
            <input type="text" />
          </td>
        </tr>
      </thead>
    </table>
  );
}