quasar Put q-select in q-checkbox

Question

I'm trying to get use "quasar" I want to let the user choose which filtering method to use, then enter the content, and finally set a button to output the selected filtering method and content to the backend

So I plan to use a lot of "q-checkbox" and also have some different elements in it (because there are different types to enter)

But I found that the elements placed inside the q-checkbox could not fill the class I used for typesetting (col of quasar)

Finally, I also want to confirm that when a large number of checkboxes need to be used and there will be different elements and process in them, is it recommended to use plus ? Any suggestions?

<div class="row col">
        <div class="col" >
          <q-checkbox  v-model="selection" val="teal" >
            <q-input :disable="data.table.disable" filled v-model="data.table.applicant" label="ID1"></q-input>
          </q-checkbox>
        </div>
        <div class="col">
          <q-checkbox  val="orange"  >
            <q-select color="teal" v-model="selected" :options="data.payment_method" label="method1" >
              <template v-slot:prepend>
                  <q-icon name="payment"  class="text-blue" />
              </template>
            </q-select>
          </q-checkbox>
          </div>
        <div class="col">
          <q-checkbox class="col" v-model="selection" val="red"  >
            <q-select color="teal" v-model="selected" :options="data.payment_method" label="method2" >
              <template v-slot:prepend>
                  <q-icon name="payment"  class="text-blue" />
              </template>
            </q-select>
          </q-checkbox>
          </div>
      </div>

This picture is my current execution result:

This second picture is the result I want to execute (I am using Inline styles to make manual changes):