title: How do I align card image and card content next to one another? Vuetify
body: <p>I'm having trouble creating a responsive card with the card image and content split into 2 different columns. One column containing the image and the other column containing the description.</p>
  
  <p>I've tried using a row with two different columns, but I'm doing something wrong.</p>
  
  <pre><code>&lt;v-layout column&gt;
      &lt;v-card dark flat&gt;
  
        &lt;v-row&gt;
  
          &lt;v-col cols="4"&gt;
              &lt;v-img src="https://cdn.vuetifyjs.com/images/cards/store.jpg"&gt;&lt;/v-img&gt;
          &lt;/v-col&gt;
  
          &lt;v-col cols="8"&gt;
              &lt;v-card-title&gt;&lt;h1&gt;Title&lt;/h1&gt;&lt;/v-card-title&gt;
              &lt;v-card-text&gt;Description&lt;/v-card-text&gt;
          &lt;/v-col&gt;
  
        &lt;/v-row&gt;
      &lt;/v-card&gt;
  &lt;/v-layout&gt;
  </code></pre>
  
  <p>The code above displays the image and the content in its own separate rows.
  The card basically needs to have this format to it: <a href="https://uicookies.com/wp-content/uploads/2019/02/CSS-Cards-E-Commerce-Shop-Card.jpg" rel="nofollow noreferrer">https://uicookies.com/wp-content/uploads/2019/02/CSS-Cards-E-Commerce-Shop-Card.jpg</a></p>