Дизайн сетки и список правильно

Question

Я создаю страницу, где я показываю некоторые данные, используя в основном гриды и текстовые поля.Моя страница выглядит почти так, как я хочу, но мне нужно сделать несколько завершений, и я не могу понять, как это сделать.

Мой код: (Я добавил комментарии, где должно быть изменение)

  {props.brokerDetails && <div>
    <Typography variant="subheading" gutterBottom > // This should be margined to the center so it will seem connected to the text fields below it .
    {labels.brokerGeneralDetails}
  </Typography>
    <Grid container spacing={24} alignItems="center">
      <Grid item sm={5}>
          margin="normal"
          fullWidth
          inputProps={{ disabled: true }}
          ...
        />
      </Grid>
      <Grid item sm={1}>
        <TextField
          ...
        />
      </Grid>
      <Grid item sm={1}>
        <TextField
          ...
        />
      </Grid>
      <Grid item sm={2}>

      //// The list header should be margined to the same height of the textfields title.
       <List subheader={<ListSubheader> {labels.brokerEmails} </ListSubheader>} >
        {props.brokerDetails.emails? props.brokerDetails.emails.split(";").map((email,index) => {
           return (email && 
                   <ListItem key={index} disableGutters>
                      <ListItemIcon>
                         <DraftsIcon/>
                      </ListItemIcon>
                      <ListItemText primary={email}/> 
                    </ListItem>)}) : <ListItem> <ListItemText primary={labels.noEmails}/></ListItem> }
        </List>
      </Grid>
    </Grid>
    <Typography variant="subheading" gutterBottom>
      {labels.brokerAccountDetails}
    </Typography>
    <Grid container spacing={24}>
      <Grid item sm={1}>
        <TextField
          ....
        />
      </Grid>
      <Grid item sm={1}>
        <TextField
          ...
        />
      </Grid>
      <Grid item sm={1}>
        <TextField
         ...
        />
      </Grid>
    </Grid>

     // This should be margined to the center so it will seem connected to the text fields below it .
    <Typography variant="subheading" gutterBottom >
      {labels.brokerOtherDetails}
    </Typography>
    <Grid container spacing={24}>
      <Grid item sm={1}>
        <TextField
          ...
        />
      </Grid>
      <Grid item sm={1}>
       ...
        />
      </Grid>
      <Grid item sm={1}>
          <TextField
            ...
          />
        </Grid>
        <Grid item sm={1} >
          <TextField
           ...
          />
        </Grid>
        <Grid item sm={1}>
          <TextField
           ...
          />
        </Grid>
        <Grid item sm={1}>
          <TextField
           ...
          />
        </Grid>
    </Grid>

Вот так выглядит мой дизайн в настоящее время, я выделил красными стрелками места, которые не компилируются так, как я хочу.(1) левая метка над списком писем неправильно помечена заголовком textFields.(2) две типографики справа становятся маргинальными к вершине, и я хочу, чтобы они были маргинальными к центру, как во второй строке (я не знаю, почему это единственная, которая правильно помечена).