How to shift v-flex elements away from one another in Vuetify? - vue.js

Question

in my vuejs application, I have a file called ProductDetails.vue. For the template, I used Vuetify to create a grid system where the product's image will be at the left, and the product's content to the right. However, I have encountered two problems. Firstly, how do i shift the images and content away from one another so that there is space. Secondly, how to shift the button to the right most of the product's content. Below is my code, a screenshot of my current design and a screenshot of my desired design.
https://codepen.io/Issaki/pen/qwRWgZ
Update #1: I am still trying to solve this issue, is there anyone that can help me?
<template>
<div>
<v-container>
<v-layout row wrap>
<v-flex xs12 sm6 md5 lg5>
<v-img
class="white--text"
height="350px"
src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
/>
</v-flex>
<v-flex xs12 sm6 md7 lg7>
<p class="subheading font-weight-light grey--text text--darken-1 mb-1">Samsung</p>
<p class="display-1 font-weight-light">OnePlus 3</p>
<p
class="subheading"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="headline font-weight-medium">$329</p>
<p class="muted">Inclusive of all taxes. Free home delivery.</p>
<v-btn color="yellow">
<v-icon left>shopping_cart</v-icon>Add to Cart
</v-btn>
</v-flex>
</v-layout>
</v-container>
</div>
</template>

Answer 1

You can add space between the two v-flex if you simply add some padding to one of them. So by adding class="pl-3" which translates to padding-left-3 to the second v-flex you can add some space. You can learn more about spacing helpers.
For the button just wrap it in:
<v-layout align-end justify-end>
<v-btn color="yellow" >
<v-icon left>shopping_cart</v-icon>Add to Cart
</v-btn>
</v-layout>
You can learn more about it here.
Update: A better way to add spacing though would be to add grild-list-* to your container. In that case it will add some spacing to all your elements in the container so you dont need the added padding anymore. You can see the updated Codepen below and read more here.
I have forked and edited your Codepen.
Hope it helps :)