title: Dividing v-card into 3 part with different percentages
body: <p>I've been trying to divide v-card into 3 part. </p>
  
  <p>Item's image on left one, title and details on center of card.</p>
  
  <p>And price must be right side of card</p>
  
  <p>Furthermore, it should be same if item's detail too long or too short.</p>
  
  <p><a href="https://i.stack.imgur.com/dItiG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dItiG.png" alt="First one (What i get), second one (what i want)"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"&gt;&lt;/script&gt;
  
                              &lt;v-card ripple @click="menuItemClicked(item)" class="pa-0 ma-0"&gt;
  
  
  
                                  &lt;div class="d-flex flex-row pt-2 pb-2"&gt;
  
                                      &lt;v-col cols="2"&gt;
                                          &lt;v-avatar :size="menuPhotoSize"&gt;
                                              &lt;v-img src="https://atlas-content-cdn.pixelsquid.com/stock-images/cardboard-box-2M7wzKF-600.jpg"&gt;
                                                  &lt;template v-slot:placeholder&gt;
                                                      &lt;v-row class="fill-height ma-0" align="center" justify="center"&gt;
                                                          &lt;v-progress-circular indeterminate color="grey lighten-5"&gt;
                                                          &lt;/v-progress-circular&gt;
                                                      &lt;/v-row&gt;
                                                  &lt;/template&gt;
  
                                              &lt;/v-img&gt;
                                          &lt;/v-avatar&gt;
                                      &lt;/v-col&gt;
  
  
                                      &lt;div class="ma-0 pa-0 pl-2"&gt;
                                          &lt;v-card-text&gt;
                                              &lt;v-row no-gutters&gt;
                                                  &lt;v-col cols="12"&gt;
                                                      &lt;h1 style="font-size: 1.25em" style="min-width: 100px; max-width: 100%;" class="pl-2 flex-grow-1 flex-shrink-0"&gt;
                                                          Item Name
                                                      &lt;/h1&gt;
                                                  &lt;/v-col&gt;
                                                  &lt;v-col cols="10"&gt;
                                                      &lt;p class="pl-2"&gt;
                                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                                      &lt;/p&gt;
                                                  &lt;/v-col&gt;
  
                                              &lt;/v-row&gt;
                                          &lt;/v-card-text&gt;
  
                                      &lt;/div&gt;
  
                                      &lt;v-col cols="2"&gt;
  
                                          &lt;h4 class="pt-2" style="font-size: 1.00em"&gt;$ 10&lt;/h4&gt;
  
  
                                      &lt;/v-col&gt;
                                  &lt;/div&gt;
                              &lt;/v-card&gt;</code></pre>
  </div>
  </div>
  </p>