Vuetify switchers side-by-side on right

I am using vuetify 3 with vuejs 3, and I am trying to create 3 switchers side by side on the right side:

<template>
  <v-card variant="outlined" class="pa-6 ma-3" color="#BDBDBD">
    <v-row class="pa- ma-0">
      <v-btn
        color="primary"
        class="mr-2"
        :loading="loading"
        :disabled="loading"
      >
        Atualizar
      </v-btn>
      <v-btn color="error" :disabled="selected.length == 0" class="mr-2">
        Plotar
      </v-btn>
      <v-btn color="warning" :disabled="selected.length == 0" class="mr-3">
        Favoritar
      </v-btn>
      <v-row class="ml-3 black-label">
        <v-switch
          label="Intraday"
          v-model="intraday"
          color="primary"
          hide-details
        ></v-switch>
        <v-switch
          label="Stocks"
          v-model="stocks"
          color="primary"
          hide-details
        ></v-switch>
        <v-switch
          label="Favorites"
          v-model="favorites"
          color="primary"
          hide-details
        ></v-switch>
      </v-row>
    </v-row>
  </v-card>
</template>

<script setup>
  import { ref } from 'vue'
  const search = ref('')
  const selected = ref([])
  const intraday = ref(false)
  const favorites = ref(false)
  const stocks = ref(false)
  const loading = ref(false)
  const msg = ref('Hello World!')
</script>

Reproducible example

I've tried to change v-switch class to mr-3 as I did with buttons, but I couldn't get the expected output.

You could just remove the v-row elements (I don't think they should be nested anyway), and create your layout manually:

  <v-card>
    <div class="d-flex flex-wrap justify-space-between align-center">
      <div>
        button declarations...
      </div>
      <div class="d-flex" style="gap: 20px">
        switch declarations...
      </div>
    </div>
  </v-card>

• d-flex turns the container into a flexbox, so the two containers sit next to each other and we can use flex alignment.
• flex-wrap allows the box to put the second container on a new line when there is not enough space.
• justify-space-between will put unused space between the items (this is what pushes the switches to the right).
• align-center will center the content vertically.

Here it is in a playground