MUI Grid 2 Columns - Custom Heights - reactjs

Question

I'm trying to have two columns with MUI grid. One column containing two boxes that take up 9/12 and then one column taking up 3/12 with 100% vh.
I've come close but can't get the second column to align to the top of the page.
<Grid container spacing={1}>
<Grid item xs={12} sm={7} lg={9}>
<Card className={classes.welcomeBar}>
<p className={classes.welcomeHeader}> Welcome back SpongeBob! </p>
</Card>
</Grid>
<Grid item xs={12} sm={7} lg={9}>
<Card className={classes.sectionHeight}>
<CardContent>
<p> This is the main content</p>
</CardContent>
</Card>
</Grid>
<Grid container item xs={12} sm={5} lg={3}>
<Card className={classes.tipsHeight}>
<CardContent>
<p> This is the tip bar</p>
</CardContent>
</Card>
</Grid>
</Grid>

Answer 1

I think you just need to adjust the layout a little... effectively you've got two grids, one that gives you the two-column layout, and then another grid inside the left-hand column that provides the rows. (Alternatively, you can use a Stack for the inner content layout of the left-hand column depending on what you want to put in there.)
<Grid container spacing={1} sx={{ width: '100vw', height: '100vh' }}>
<!-- LH column -->
<Grid container xs={12} sm={7} lg={9}>
<!-- LH column content - you can swap for another grid if you need -->
<Stack spacing={1} flex="1 1 0">
<Card>
<p> Welcome back SpongeBob! </p>
</Card>
<Card>
<CardContent>
<p> This is the main content</p>
</CardContent>
</Card>
</Stack>
</Grid>
<!-- RH column -->
<Grid container item xs={12} sm={5} lg={3}>
<Card>
<CardContent>
<p> This is the tip bar</p>
</CardContent>
</Card>
</Grid>
</Grid>