CODEWITHSUNDEEP
htmlcssvue.jsvuetify.js
Joe B.
Joe B.

Reputation: 820

How can I align the left and right column contents with each other on the y-axis?

I want to align two columns that are side by side.

One column has text and I am able to align the text in the position align="start" which pushes the text to the upper left hand corner of the column.

The second column has an <v-img></v-img> with an svg. I also want the content of the column to be in the position align="start", but the content seems to be in the position align="center".

This is causing the text in the left column to sit higher up on the y-axis than the svg in the right column.

Here is what I have tried: 

<v-col xs="12" sm="12" md="12" lg="12" xl="12" class="pl-0">
 <v-row align="start">
  <v-col>
   <p class="text-left">
    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>
  </v-col>
  <v-col>
   <v-img
    class="one-click-image"
    :src="require('../assets/profile.svg')"
    contain
    height="200"
    width="500"
   ></v-img>
  </v-col>
 </v-row>
</v-col>

How can I get the left and right column contents inline with each other on the y-axis?

Many thanks in advance.

Upvotes: 0

Views: 120

Answers (1)

Arun Uniyal
Arun Uniyal

Reputation: 127

You can pass the value like this in v-col:

<v-col
   align-self="start"
>

Upvotes: 1

Related Questions