How can a Box be aligned to the end of a toolbar without affecting content before it?

I have an app bar and a mini side drawer variant with code near identical to that which is given as example on material-ui. I am having trouble aligning a box with some info about the logged in user to the end of the app bar. Right now I am using grid containers, but these cause breaking bugs as screen size decreases. How can I force this box to the end of the toolbar while keeping any other content in the tool bar aligned to the start?

<AppBar
    position="fixed"
    className={clsx(classes.appBar, {
        [classes.appBarShift]: open,
    })}
>
    <Toolbar>
        <Grid container>
            <a href="/home">
                <SVGLOGO className="logo_stack" />
                <SVGLOGOHORI className="logo" />
            </a>
            <Typography className={classes.envFlag} hidden={hidden}>
                You are on the {process.env.REACT_APP_ENVIRONMENT} environment. Click{" "}
                <a href="youtube.com/">here</a> to go to production.
            </Typography>
        </Grid>

        <Grid container justifyContent="flex-end">
            <Box
                style={{
                    display: "flex",
                    alignItems: "center",
                    backgroundColor: "#0672cb",
                    height: "64px",
                    padding: "10px 24px 10px 24px",
                }}
            >
                <i class="icon_class" style={{ fontSize: "24px", color: "#fff", marginRight: "10px" }}></i>
                <Box style={{ marginLeft: "10px" }}>
                    <Typography
                        style={{
                            color: "#FFF",
                            fontWeight: 400,
                            fontSize: 14,
                        }}
                    >
                        {loggedUser}
                    </Typography>
                    <Typography
                        style={{
                            color: "#FFF",
                            fontWeight: 400,
                            fontSize: 14,
                        }}
                    >
                        {userRole}
                    </Typography>
                    <Typography
                        style={{
                            color: "#FFF",
                            fontWeight: 400,
                            fontSize: 14,
                        }}
                    >
                        {userExperience}
                    </Typography>
                </Box>
            </Box>
        </Grid>
    </Toolbar>
</AppBar>