Как разделить панель инструментов material-ui на левую и правую части

Как разделить панель инструментов material-ui на левую и правую части. Например, это моя панель инструментов

let EnhancedTableToolbar = props => {
  const { numSelected, classes ,deletefunc} = props;

  return (
    <Toolbar
      className = {classNames(classes.root, {
        [classes.highlight]: numSelected > 0,
      })}
    >
      <div className = {classes.title}>
        {numSelected > 0 ? (
          <Typography color = "inherit" variant = "subtitle1">
            {numSelected} selected
          </Typography>
        ) : (
          <Typography variant = "h6" id = "tableTitle">
            User List
          </Typography>
        )}
      </div>

      <div className = {classes.actions}>
        {numSelected > 0 ? (
        <div >

        <div style = {{ display: 'inline-block' }}>
          <Tooltip title = "Delete">
            <IconButton aria-label = "Delete">
              <DeleteIcon onClick = {() => { if (window.confirm('Are you sure you wish to delete '+numSelected +' item?')) {deletefunc()} } }>
              </DeleteIcon>
            </IconButton>
          </Tooltip>
        </div>
         <div style = {{ display: 'inline-block' }}>
          <Tooltip title = "Edit">
            <IconButton aria-label = "Edit">
              <EditIcon>
              </EditIcon>
            </IconButton>
          </Tooltip>
            </div>

         </div>


        ) : (
          <Tooltip title = "Filter list">
            <IconButton aria-label = "Filter list">
              <FilterListIcon />
            </IconButton>
          </Tooltip>
        )}


      </div>
    </Toolbar>
  );
};

Я хочу показать numSelected в левой части панели инструментов и кнопку удаления и кнопку редактирования в правой части панели инструментов. Однако мой пример вывода показывает кнопку удаления и кнопку редактирования рядом с numSelected. У кого-нибудь есть решение по этому вопросу?