Nested Grid MUI react

Question

I am trying to achieve something shown in the image below

So far i have got

<Grid container justify=“space-between”>
    <Grid container item>
        <Grid item>
            A
        </Grid>
        <Grid item>
            B
        </Grid>
    </Grid>
    <Grid item>
        C
    </Grid>
</Grid>

But my results are like this

A B
C

Anyone can point me in the right direction as to achieve the results below?

Answer 1

You must include container with an item

    <Grid container justify='space-between'>
      <Grid item>
        <Grid container>
          <Grid item>
              A
          </Grid>
          <Grid item>
              B
          </Grid>
        </Grid>
      </Grid>
      <Grid item>
          C
      </Grid>
    </Grid>