Vuetify horizontally align content of v-list-item

I am working on a navigation drawer with Vuetify and Vue.js. I am dynamically generating the list items in this drawer.

Each list item consists of an icon, a name and a delete icon. So far everything is there, the only problem is, that I just can't get the 2 icons and text inside each list item to be nicely aligned vertically.

I added an image so you can see how it looks right now. image

This is the code from my component:

    <v-list>
      <v-list-item
        class="ui-navigation"
        v-for="(block, index) in layouts2"
        v-bind:key="`layout-button-${block._uid}`">
        <v-list-item-icon>
          <v-icon
          v-on:click="switchLayouts(block._uid)">
              mdi-home-city
          </v-icon>
        </v-list-item-icon>

        <v-list-item-content>
          <v-list-item-title> Layout {{index + 1}} </v-list-item-title>
        </v-list-item-content>

        <v-list-item-content>
          <v-btn icon
            v-on:click="deleteLayout(block._uid)"
          >
            <v-icon>mdi-delete-outline</v-icon>
          </v-btn>
        </v-list-item-content>
      </v-list-item>
    </v-list>

I am glad about any help regarding this probably simply problem!