I'm currently in the learning phase of material-ui and encountering an issue with floating the grid content to the right side.
Despite trying
alignItems="flex-start" justify="flex-end" direction="row"float:right, I have not been successful.
I've explored a response on stackoverflow from this question, but it didn't resolve my problem.
Below is my code and you can also access it on codesandbox through this 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);