Material UI- Facing a problem to align the grid to float right - css

Question

I am in learning phase of the material-ui and I am facing an issue that I am not able to float the grid content into right side.
I tried alignItems="flex-start" justify="flex-end" direction="row" in the container grid but not succeed and also tried css float:right property.
I go through the answer of stackoverflow question but it not work for me.
My Code is below and codesandbox link
import React from "react";
import ReactDOM from "react-dom";
import {
ExpansionPanel,
ExpansionPanelSummary,
ExpansionPanelDetails,
Typography,
Grid
} from "#material-ui/core/";
import ExpandMoreIcon from "#material-ui/icons/ExpandMore";
function App() {
return (
<ExpansionPanel square defaultExpanded={true}>
<ExpansionPanelSummary
style={{ backgroundColor: "#009ACD", color: "white" }}
expandIcon={<ExpandMoreIcon />}
id="panel1a-header"
>
<Typography variant="h6">General Details</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container>
<Grid item sm={3}>
Image Container
</Grid>
<Grid item sm={2}>
<Typography variant="h6"> {"Prabhat Kumar"}</Typography>
<Typography> Tester </Typography>
</Grid>
<Grid
contaienr
sm={7}
alignItems="flex-end"
justify="flex-end"
direction="row"
>
<Grid item>
<Typography variant="h6">
Need this content on the right side
</Typography>
</Grid>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

I tried you sandbox and found a few things going on here:
contaienr where should be container
<Grid
contaienr // Fix
sm={7}
alignItems="flex-end" // remove
justify="flex-end"
direction="row" // Remove
>
Just replace those to this:
<Grid container sm={7} justify="flex-end">