How to center align one item and right align another using MUI v5?

Question

I would like to center 3 navigation tabs in the middle of my page and have a dropdown on the far right which is used for sorting. I was able to get the dropdown on the far right although can't figure out how to perfectly center the 3 navigation tabs inside the <Box> <Box/> component.

Here is a picture of what I am trying to do:

Here is a code sandbox: https://codesandbox.io/s/45159071-how-to-align-a-component-to-the-center-right-forked-0y60s3?file=/demo.js

<Grid
    container
    sx={{ marginTop: 3, marginBottom: 3, alignItems: 'center' }}
>
    <Box
        sx={{ marginRight: 'auto' }}
    >
        <Tabs
            value={activeMenuTab}
            onChange={handleChangeTab}
        >
            <Tab label="Tab 1" />
            <Tab label="Tab 2" />
            <Tab label="Tab 3" />
        </Tabs>
    </Box>
    <Grid
        item
        xs
        style={{ flexGrow: 0 }}
    >
        <FormControl
            sx={{ minWidth: 150 }}
            size="small"
        >
            <InputLabel id="sort-by">Sort By</InputLabel>
            <Select
                labelId="sort-by"
                value={selectedValue}
                label="Sort By"
                onChange={handleSorting}
            >
                <MenuItem value="oldest">Oldest</MenuItem>
            </Select>
        </FormControl>
    </Grid>
</Grid>

I found a similar post which uses pure CSS although struggled to integrate it within the MUI components: Center one and right/left align other flexbox element

Answer 1

Try this solution, I only used the Box component instead of Grid to reproduce just like in the post you pointed to with grid.

<Box
  display="grid"
  gridTemplateColumns="1fr 1fr 1fr"
  gridAutoRows="auto"
  rowGap={2}
  alignItems="center"
  marginY={3}
>
  <Box gridColumn="2">
    <Tabs centered value={'null'} onChange={handleChangeTab}>
      <Tab label="Tab 1" />
      <Tab label="Tab 2" />
      <Tab label="Tab 3" />
    </Tabs>
  </Box>
  <Box
    gridColumn={{ xs: '1 / -1', sm: '3' }}
    gridRow={{ xs: '2', sm: '1' }}
    justifySelf={{ xs: 'center', sm: 'end' }}
  >
    <FormControl sx={{ minWidth: 150 }} size="small">
      <InputLabel id="sort-by">Sort By</InputLabel>
      <Select labelId="sort-by" value="Some Value" label="Sort By" onChange={handleSorting}>
        <MenuItem value="oldest">Oldest</MenuItem>
        <MenuItem value="newest">Newest</MenuItem>
      </Select>
    </FormControl>
  </Box>
</Box>;