Next UI grid items height is not balanced

Question

This is my code

import { Grid, Radio } from '@nextui-org/react';

<div>
          <Radio.Group defaultValue={null}>
            <Grid.Container gap={2}>
              <Grid xs={12} sm={7}>
                <Grid.Container gap={1}>
                  <Grid xs={12}>
                    <Radio value="option1">
                      <label >HTML/CSS</label>
                    </Radio>
                  </Grid>
                  <Grid xs={12}>
                    <Radio value="option2">
                      <label >Single Page Application</label>
                    </Radio>
                  </Grid>
                  <Grid xs={12}>
                    <Radio value="option3">
                      <label >Wordpress</label>
                    </Radio>
                  </Grid>
                  <Grid xs={12}>
                    <Radio value="option4">
                      <label >Shopify</label>
                    </Radio>
                  </Grid>
                </Grid.Container>
              </Grid>
              <Grid xs={12} sm={5}>
                <Grid.Container gap={0.5}>
                  <Grid xs={12}>
                    <Radio value="option5">
                      <label >LEAD PAGES</label>
                    </Radio>
                  </Grid>
                  <Grid xs={12}>
                    <Radio value="option6">
                      <label >UNBOUNCE</label>
                    </Radio>
                  </Grid>
                </Grid.Container>
              </Grid>
            </Grid.Container>
          </Radio.Group>
        </div>

But unfortunately two sides of grid is not balanced.

Seeing a big gap in rightside. And this is inspect element

I need same gap between all items.