Material UI Popper Styling

Question

What I'm trying to achieve

What I currently have

I'm trying to achieve the following using flex. What's the best approach to handle this? I'm finding it difficult to separate the gap between the two text fields (text && secondaryText)

popper: createStyles({
        root: {
            backgroundColor: white,
            borderRadius: 4,
            boxShadow: "0 2px 12px 0 rgba(0, 0, 0, 0.5)",
            zIndex: 1301,
            maxHeight: 200,
            overflowY: "auto",
            display: "flex",
            flexDirection: "column",
        },
    }),
};

<Popper
       className={toClassName(classes.popper)}
       >             
         {children} // Component AutocompleteSelection
</Popper>

const AutocompleteSelection: FC<AutocompleteSelectionProps> = ({
    text,
    secondaryText,
}): JSX.Element => {
    const classes = useMakeStyles(baseStyles) as Properties;
    return (
        <ListItem styles={listItem}>
            <Typography classes={classes.typography}>
                {text}
                {secondaryText}
            </Typography>
        </ListItem>
    );
};

const baseStyles: Properties = {
    listItem: createStyles({
        root: {
            "&:hover": {
                backgroundColor: greyTwo,
            },
        },
    }),
    typography: createStyles({
        root: {
            fontSize: 14,
            lineHeight: 1,
        },
    }),
};

Answer 1

Ciao, to display secondaryText floated right in a flex display, to could use marginLeft: "auto" in secondayText class like:

  <Typography class={classes.typography}>
    <Typography class={classes.text}>{"hello"}</Typography>
    <Typography class={classes.secondaryText}>{"there"}</Typography>
  </Typography>

And style:

const useStyles = makeStyles((theme) => ({
  typography: {
    display: "flex"
  },
  text: {},
  secondaryText: {
    marginLeft: "auto"  // secondary text floated to right
  }
}));

Here a codesandbox example.