I am new to using Material UI and Grid, and I'm encountering an issue with positioning two grid containers side by side.
My goal is to have an image on the left within a Grid container, and a list of objects on the right. While I was successful in positioning the list correctly, the image refuses to align to the left.
Below is the code snippet I used:
return (
<>
<Appbar />
<br />
<Grid container justifyContent={"right"} style={{marginTop:"50px"}}>
<Grid container direction="row" item xs={6}>
<Grid item>
<Paper elevation={3} style={paperStyle}>
{currentPosts.map(pakketje => (
<Paper elevation={6} style={{ margin: "10px", padding: "15px", textAlign: "left", backgroundColor: "white", borderRadius: "25px" }} key={pakketje.id}>
<p style={{fontSize:"18px"}}><b>Pakketje    </b></p>
<b>ID: {pakketje.id}</b>
  
<b>Status: {pakketje.status}</b>
  
<b>Code: {pakketje.code}</b>
<br /><br />
<Button variant="contained" style={{ backgroundColor: "#AE0000" }} color="secondary" onClick={(e) => deletePakketje(pakketje.id, e)}>
Delete <DeleteIcon fontSize="small" />
</Button> 
<Link to={`/pakketjeUpdaten/${pakketje.id}`}>
<Button variant="contained" style={{ backgroundColor: "Navy" }} color="secondary">
Update <ReplayIcon fontSize="small" />
</Button>
</Link> 
<Button variant="contained" style={{ backgroundColor: "black" }} color="secondary" onClick={(e) => statusOnderweg(pakketje.id, e)}>
Verzenden <LocalShippingIcon fontSize="small" />
</Button>
<br />
<br />
</Paper>
))
}
</Paper>
</Grid>
</Grid>
</Grid>
<Grid container justifyContent={"left"}>
<Grid container direction="column" item xs={4}>
<Grid item>
<div>
<img src={AllePakketjes} width="410" height="350" alt="" style={{ marginLeft: "365px" }} />
</div>
<h1 style={{ textAlign: "center", color: "white" }}>Alle pakketjes</h1>
</Grid>
</Grid>
</Grid>
</>
);
}
I've attempted to create another Grid container for the image and position it next to the list, but it remains fixed in one place below the list.
Below are screenshots of the desired user interface: