title: How to align list items with vuetify (1.5)
body: <p>Our app uses vuetify for styling which for the most part is very good, I have come across something which I should not be spending this much time figuring out. Basically the issue is when using a scoped <code>item</code> . slot to customize items shown from a <code>v-select</code> it works great if all the items are the same size (as is the case in the docs, the trouble begins when the items are not the same size.
  Here is my code:</p>
  
  <pre><code>&lt;v-flex sm5&gt;
    &lt;v-select :items="evaluatedQuestions" @input="onQuestionSelected" :label="Select Questions..." item-text="display"
      item-value="question_id" clearable hide-selected single-line
      :menu-props="{'max-width': 716.4, 'allow-overflow': true}" ref="test"&gt;
      &lt;template v-slot:item="{ item }"&gt;
        &lt;v-list-tile class="pa-0 question-dd"&gt;
          &lt;v-list-tile-content class="pa-0"&gt;
            &lt;v-list-tile-title&gt; 
              #{{ item.question_id }}
            &lt;/v-list-tile-title&gt;
            &lt;v-list-tile-sub-title&gt;
              {{ item.total }}
            &lt;/v-list-tile-sub-title&gt;
          &lt;/v-list-tile-content&gt;
        &lt;/v-list-tile&gt;
        &lt;v-list-tile&gt;
          &lt;!-- &lt;v-flex sm10&gt; --&gt;
          {{item.question_title}}
          &lt;!-- &lt;/v-flex&gt; --&gt;
        &lt;/v-list-tile&gt;
        &lt;!-- &lt;v-list-tile&gt;
          &lt;v-divider class="px-2" vertical&gt;&lt;/v-divider&gt;
        &lt;/v-list-tile&gt;
        &lt;v-list-tile-avatar&gt;
          &amp;lt;!&amp;ndash; {{item.question_title}}&amp;ndash;&amp;gt;
        &lt;/v-list-tile-avatar&gt; --&gt;
      &lt;/template&gt;
      &lt;v-divider&gt;&lt;/v-divider&gt;
    &lt;/v-select&gt;
  &lt;/v-flex&gt;
  </code></pre>
  
  <p>Here is a screenshot of what this looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/Q6Lxi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q6Lxi.png" alt="enter image description here"></a></p>
  
  <p>Things I tried: </p>
  
  <ol>
  <li>Putting everything in a . layout and creating v-flex which take a set amount of the grid.</li>
  <li><p>Injecting classes in places where I don't have access (sadly v-list is not exposed as you can  see <a href="https://github.com/vuetifyjs/vuetify/issues/6458" rel="nofollow noreferrer"></a></p></li>
  <li><p>Adding a class "question-dd" with a max-width to set the size of the first list item, unfortunately the surrounding elements determince the size.<br>
  Bottom line is that the <code>v-list</code> items resize based on their size and do not align well when they differ in size, how can I get this to look aligned where the two data pieces in the first list items align with the second list item regardless of their size?</p></li>
  </ol>