Vuetify's grid system within a v-toolbar

Question

Given I have a the following toolbar block

    <v-toolbar
  color="blue darken-1"
  dark
  app
  clipped-left
  fixed
>
  <v-toolbar-title :style="$vuetify.breakpoint.smAndUp ? 'width: 300px; min-width: 250px' : 'min-width: 72px'" class="ml-0 pl-3">
    <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
    <span class="hidden-xs-only">eventzimmer</span>
  </v-toolbar-title>
  <v-text-field
    light
    solo
    prepend-inner-icon="search"
    placeholder="Search"
    class="mt-2"
  ></v-text-field>
  <div class="d-flex align-left ml-1">
    <v-btn icon>
      <v-icon>
        location_on
      </v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>
        date_range
      </v-icon>
    </v-btn>
  </div>
</v-toolbar>

How would I be able to use the vuetify grid system to achieve horizontal grids? Given that I use the grid example from the docs that would look like

<v-container fluid>
  <v-layout row wrap>
    <v-flex xs-8>
     <v-text/>
    </v-flex>
    <v-flex xs-4>
     <buttons/>
    </v-flex>
  </v-layout>
</v-container>

But unfortunately that looks mostly akward. The docs don't really flavour an example for horizontal alignment. Any example would very much appreciated!