title: Removing element white space inside v-layout [Vue + Vuetify]
body: <p>I wanted to make a stepper display for forms at the top and I can't seem to figure out why is there a white space or rather why is the last spacing for the <code>v-divider</code> shown even with <code>v-if</code> in place. I'm using Vue + Vuetify 1.2</p>
  
  <p><a href="https://i.stack.imgur.com/2xTpL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2xTpL.png" alt="enter image description here"></a></p>
  
  <p>This is how my template looks like</p>
  
  <pre><code>&lt;v-layout row style="padding: 25px 0;"&gt;
      &lt;v-layout align-center v-for="(item, index) in stepperInfo" v-bind:key="index"&gt;
          &lt;div class="ml-4 mr-4 caption"&gt;
              &lt;v-layout class="mb-1"&gt;
                &lt;v-icon small style="margin: auto;"&gt;{{ item.icon }}&lt;/v-icon&gt;
              &lt;/v-layout&gt;
              {{ item.title }}
          &lt;/div&gt;
          &lt;v-divider v-if="index !== stepperInfo.length - 1"&gt;&lt;/v-divider&gt;
      &lt;/v-layout&gt;
  &lt;/v-layout&gt;
  </code></pre>
  
  <p>And for the data, I just have this:</p>
  
  <pre><code>stepperInfo: [
              {
                  icon: 'fa-building',
                  title: 'Step 1'
              },
              {
                  icon: 'fa-briefcase',
                  title: 'Step 2'
              },
              {
                  icon: 'fa-clipboard-list',
                  title: 'Step 3'
              },
              {
                  icon: 'fa-file-invoice-dollar',
                  title: 'Step 4'
              },
              {
                  icon: 'fa-users',
                  title: 'Step 5'
              }
          ]
  </code></pre>