Adjusting the Div heights in Material UI using grid

Question

For my project I'm tasked to use material-ui. Is there a way to reduce the width height of the div containing "Sign In With" text as shown in pic to bring the buttons closer to the text?

From this:

To this:

The code:

<div className={classes.root}>
  <Grid
    container
    direction="row"
    spacing={0}
  >
    
      <React.Fragment>
          
        <Grid item xs={6} container direction="row">
            <Grid item xs={12}>
              <h1>Sign In With</h1>
            </Grid>
            <Grid item xs={12} container>
              <Grid item xs={3}>
              
                <Button
                  className={classes.buttonGoogle}
                  onClick={() => {
                    if (props.onSelectGoogle !== undefined)
                      props.onSelectGoogle('google');
                    }}
                >
                  Google
                </Button>
              
              </Grid>
              <Grid item xs={3}>
                <Button
                  className={classes.buttonLinkedIn}
                  onClick={() => {
                  if (props.onSelectLinkedIn !== undefined)
                    props.onSelectLinkedIn('linkedin');
                  }}
                >
                  LinkedIn
                </Button>
              </Grid>
            </Grid>
        </Grid>
            <Grid item xs={6}>
              <div className={classes.LoginImage}></div>
            </Grid>
      </React.Fragment>
    
    
    
  </Grid>
</div>

Thank You Very Much!

Answer 1

The First layer Grid is enough, the inside one just complicates stuff. I removed the inside grid (the one containing title and buttons).

You can add some styles to title and buttonsContainer

<div className={classes.root}>
  <Grid container direction="row" spacing={0} >
    <Grid item xs={6} >
        <h1 className={classes.title} >Sign In With</h1>
        <div className={classes.buttonsContainer} >
        <Button
          className={classes.buttonGoogle}
          onClick={() => {
                if (props.onSelectGoogle !== undefined)
                    props.onSelectGoogle('google');
          }}
        >Google</Button>
        <Button
          className={classes.buttonLinkedIn}
          onClick={() => {
                if (props.onSelectLinkedIn !== undefined)
                props.onSelectLinkedIn('linkedin');
          }}
        >LinkedIn</Button>
        </div>
    </Grid>
    <Grid item xs={6}>
        <div className={classes.LoginImage}></div>
    </Grid>
  </Grid>
</div>

Happy Hacking!