在React中移动网格布局

Question

您好，我需要移动网格以显示以下布局

但是现在我的布局看起来像这样     

我仍在尝试了解网格的工作方式，以下是我对网格进行格式化的尝试，但是它不想将其自身与我希望的庄园对齐

    <Grid item xs={8}>
            <Grid className = {classes.root} container direction ="column"
                alignItems="flex-start">
                {/* <Typography variant="title" style={{ }}>example</Typography> */}
                <Paper className = {classes.mainDetailsPaper}>
                    <Typography variant="title">Main Details</Typography><Divider />
                    <Typography variant="subheading">Organisation: </Typography>
                    <Typography variant="subheading">Category: </Typography>
                    <Typography variant="subheading">Sub Category: </Typography>
                </Paper>
            </Grid>
            <Grid className = {classes.root} container direction ="row"
            alignItems="flex-end">
                <Paper className = {classes.subDetailsPaper}>
                    <Typography variant="title">Contract Dates</Typography><Divider />
                    <Typography variant="subheading">Start Date: </Typography>
                </Paper>
                <Paper className = {classes.subDetailsPaper}>
                    <Typography variant="title">Valuation</Typography><Divider />
                    <Typography variant="subheading">Estimated Contract Value: </Typography>
                </Paper>
                <Paper className = {classes.subDetailsPaper}>
                    <Typography variant="title">Supplier Info</Typography><Divider />
                </Paper>
            </Grid>
        </Grid>