title: Vuetify - bottom align text field
body: <p>I'm trying to align the bottom of my <code>search</code> text field with the bottom of my floating action button. <a href="https://codepen.io/Trimakas/pen/rRqOdj?editors=1010" rel="nofollow noreferrer">I've created a code pen which you can see here:</a></p>
  
  <p>I've tried everything I know including: setting a negative margin, and vertical-align to both <code>baseline</code> and <code>bottom</code> to no effect. You can see my code in the codepen, but I've attached  it below as well:</p>
  
  <pre><code>&lt;template id="app"&gt;
      &lt;v-container&gt;
  
        &lt;v-layout row wrap align-center class="text-xs-center"&gt;
          &lt;v-flex xs12 align-center&gt;
  
          &lt;v-flex&gt;
            &lt;h1 class="display-1 sans_pro_medium fix-title-height pb-3"&gt;Failed Order Report&lt;/h1&gt;              
          &lt;/v-flex&gt;
  
          &lt;v-layout row&gt;
            &lt;v-flex xs12&gt;
              &lt;side_drawer v-show="side_drawer_show"&gt;&lt;/side_drawer&gt;
            &lt;/v-flex&gt;
          &lt;/v-layout&gt;
  
          &lt;!--&lt;v-flex xs12&gt;--&gt;
            &lt;!--&lt;v-spacer&gt;&lt;/v-spacer&gt;--&gt;
            &lt;v-layout row&gt;
                &lt;v-flex xs1&gt;
                  &lt;v-btn fab large color="purple darken-4" align-left&gt;
                    &lt;v-icon x-large color="white"&gt;refresh&lt;/v-icon&gt;
                  &lt;/v-btn&gt;
                &lt;/v-flex&gt;
  
                &lt;v-flex xs4 offset-xs7&gt;
                  &lt;v-text-field
                    align-right
                    v-model="search"
                    append-icon="search"
                    label="Search"
                    single-line
                    hide-details
                  &gt;
                  &lt;/v-text-field&gt;
                &lt;/v-flex&gt;
            &lt;/v-layout&gt;
              &lt;!--&lt;/v-flex&gt;--&gt;
  
            &lt;v-data-table
              :headers="headers"
              :items="desserts"
              :search="search"
              class="elevation-11"
            &gt;
              &lt;template v-slot:no-data&gt;
                &lt;v-alert :value="true" type="success"&gt;
                  Your orders are looking great! No orders have failed.
                &lt;/v-alert&gt;
              &lt;/template&gt;
              &lt;template slot="items" slot-scope="props"&gt;
                &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
                &lt;td class="text-xs-center"&gt;{{ props.item.calories }}&lt;/td&gt;
                &lt;td class="text-xs-center"&gt;{{ props.item.fat }}&lt;/td&gt;
                &lt;!--&lt;td class="text-xs-right"&gt;{{ props.item.carbs }}&lt;/td&gt;--&gt;
                &lt;!--&lt;td class="text-xs-right"&gt;{{ props.item.protein }}&lt;/td&gt;--&gt;
                &lt;!--&lt;td class="text-xs-right"&gt;{{ props.item.iron }}&lt;/td&gt;--&gt;
              &lt;/template&gt;
            &lt;/v-data-table&gt;
          &lt;/v-flex&gt;
        &lt;/v-layout&gt;
      &lt;/v-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  /*global localStorage*/
  // import side_drawer from '../components/side_drawer.vue';
  // import {dataShare} from '../packs/application.js';
  import axios from 'axios';
  
  export default {
      components: {
      side_drawer
      },
      data () {
        return {
          search: '',
          side_drawer_show: true,
          headers: [
            {
              text: 'Shopify Store URL',
              align: 'center',
              sortable: true,
              value: 'url'
            },
            { text: 'Shopify Order Number', value: 'shopify_order_number', align: 'center', sortable: true},
            { text: 'Amazon Order Id', value: 'amazon_order_id', align: 'center', sortable: true },
            { text: 'Shopify Order Status', value: 'shopify_order_status', align: 'center', sortable: true },
            { text: 'Amazon Order Status', value: 'amazon_order_status', align: 'center', sortable: true },
            { text: 'Action Needed', value: 'action' , sortable: true}
          ],
          desserts: [
            {
              name: 'Frozen Yogurt',
              calories: 159,
              fat: 6.0,
              carbs: 24,
              protein: 4.0,
              iron: '1%'
            },
            {
              name: 'Ice cream sandwich',
              calories: 237,
              fat: 9.0,
              carbs: 37,
              protein: 4.3,
              iron: '1%'
            },
            {
              name: 'Eclair',
              calories: 262,
              fat: 16.0,
              carbs: 23,
              protein: 6.0,
              iron: '7%'
            },
            {
              name: 'Cupcake',
              calories: 305,
              fat: 3.7,
              carbs: 67,
              protein: 4.3,
              iron: '8%'
            }
          ]
        }
      }
    }
  
  &lt;/script&gt;
  
  
  &lt;style&gt;
  
  .nudge_up {
    padding-bottom: 10px !important;
  }  
  &lt;/style&gt;
  </code></pre>