Javascript 在React中移动网格布局

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

但是现在我的布局是这样的

我仍然试图理解网格是如何工作的，下面是我格式化网格的尝试，但是它不想在我希望的庄园中对齐自己

    <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>

{/*示例*/}
主要细节
组织：
类别：
子类别：
合同日期
开始日期：
估价
预计合同价值：
供应商信息