How to put components on two columns using VueJS Vuetify Grid?

Question

I want to align two components to show some data on two columns, I've followed the official tutorial Vuetify Grid. On my case components are fixed like a rows list, on the screen I put the red square to show my goal, and show the result of the code. Also, I tried changing row to column but not works, it keep on two rows.

    <v-container>
      <v-layout row>
        <v-flex xs6>Associado: {{item.nameUser}}</v-flex>
        <v-flex xs6>Associado: {{item.nameUser}}</v-flex>
      </v-layout>
    </v-container>

complete code

    <template>
  <v-content class="pa-1" fluid>
    <v-btn
      color="blue"
      dark
      small
      fixed
      bottom
      right
      fab
      @click="showRegisterTransactionDialog = true"
    >
      <v-icon>mdi-plus</v-icon>
    </v-btn>

    <v-data-table
      :mobile-breakpoint="NaN"
      :headers="headers"
      :items="transactionsLocal"
      :items-per-page="3000"
      :hide-default-footer="true"
      :single-expand="singleExpand"
      :expanded.sync="expanded"
      item-key="id"
      show-expand
      sort-by="showDate"
      class="elevation-1"
    >
      <template v-slot:top>
        <v-toolbar flat color="white">
          <v-toolbar-title>Fluxo de caixa</v-toolbar-title>
          <v-divider class="mx-4" inset vertical></v-divider>
          <v-spacer></v-spacer>
        </v-toolbar>
      </template>

      <template v-slot:item.value="{ item }">
        <div style="color:green;" v-if="item.type == 'entry'">{{item.value}}</div>
        <div v-else style="color:red;">{{item.value}}</div>
      </template>

      <template v-slot:expanded-item="{ headers, item }">
        <v-container>
          <v-layout row>
            <v-flex xs6>Associado: {{item.nameUser}}</v-flex>
            <v-flex xs6>Associado: {{item.nameUser}}</v-flex>
          </v-layout>
        </v-container>
      </template>
    </v-data-table>

    <RegisterTransactionDialog
      @hideRegisterTransactionDialog="showRegisterTransactionDialog = false"
      :show="showRegisterTransactionDialog"
    ></RegisterTransactionDialog>
  </v-content>
</template>

UPDATE

I've set background color to black on v-container and discover that the problem is it. But, I don't know fix it too.

<v-container style="background-color: black;">

Answer 1

Why not try using something like this instead of v-flex:

<v-col cols="12" md="6">
</v-col>

<v-col cols="12" md="6">
</v-col>