J'ai essayé de séparer la boîte supérieure du centre et de répartir uniformément les éléments de la boîte inférieure. Mais quand j'ajoute les tailles des sacoches gauche et droite ne sont pas égales. Ci-dessous se trouve le code, si vous le mettez dans codepen, vous verrez que les cartes ne sont pas réparties également. Comment puis-je résoudre ce problème?

<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')