How to detach a Quasar Q card from the center?

Question

I'm trying to separate the upper box from the center and make the items in the lower box evenly distributed. But when I add , the left and right saddlebag sizes are not equal. Below is the code, if you put it in codepen you will see that the cards are not split equally. How can I solve this problem?

<div id="q-app">
  <div class="q-pa-md">
    <div class="q-gutter-md row justify-center items-center">
      <q-card class="my-card">
        <q-card-section horizontal>
              <q-card-section>
                <div class="text-h6">Group 1</div>
              </q-card-section>
              <q-separator vertical></q-separator>
              <q-card-section>
                <div class="text-h6">Group 2</div>
              </q-card-section>
            </q-card-section>
            <q-separator></q-separator>
            <q-card-section horizontal>
              <q-card-section>
                <div class="text-h6">A</div>
              </q-card-section>
              <q-card-section>
                <div class="text-h6">B</div>
              </q-card-section>
              <q-card-section>
                <div class="text-h6">C</div>
              </q-card-section>
      </q-card>
    </div>
  </div>
</div>

//script
const app = Vue.createApp({
  setup () {
    return {}
  }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')

Answer 1

You can use Quasar's excellent layout system to achieve this.

First, you must distribute your groups evenly.
Apply class col-6 to the sections separated by (Group 1, Group 2).

Then just apply the col class to Group 2 subparts (A,B).