I am trying to create a multiple select dropdown list with countries. Each row should have a checkbox, country flag, and country name in a single row. They should all be in the same line.

I got this code so far which works functionally. It puts out the right items in the right order and you can select them as you need. However they are styled really weird, not aligned properly and with huge gaps between items, please see image below. I have tried to rearrange the items and all but without success. I can change it somewhat with custom css but this have to be able to look nicer out of the box?

Here is the code:

<v-select density="compact" variant="outlined" item-value="code" item-title="name"
                :label="$t(kycQuestions.additionalCitizenshipQuestion.label)"
                :items="kycQuestions.additionalCitizenshipQuestion.countries" v-model="additionalCitizenship" multiple>    
                <template v-slot:item="{item, props}">    
                  <v-list density="compact">
                    <v-list-item v-bind="props">
                      <v-list-item-title>{{ item.props.title.name }}</v-list-item-title>
                      <template v-slot:prepend="{ isActive }">
                        <v-list-item-action start>
                          <v-checkbox :model-value="isActive"></v-checkbox>
                        </v-list-item-action>
                        <country-flag :country="item.value" />
                      </template>

                    </v-list-item>
                  </v-list>
                </template>
              </v-select>

And here is the image:

**How can I make them properly align and look nice in the list? **