How to align this Vuetify (bootstrap) v-col to the bottom of its parent row?

Question

I have tried everything I can think of but I cannot get the "Read More" hyperlink to sit at the bottom of the parent row, so that 'Read More' is at the bottom-right of the container. No combination of justify or align seems to help.

The article image is supposed to sit on the left, and then the article header goes to the right of the image with "Read More" at the bottom right of the entire panel. I suppose the easiest way to do this would be to have the hyperlink's column aligned to the bottom of the v-row and then just use text-right for formatting.

  <v-row>
    <v-col>
      <h1 style='display: inline'>{{article.title}}</h1> <span style='font-size: x-small'>{{article.month}}.{{article.day}}.{{article.year}}</span>
    </v-col>
  </v-row>
  <v-row style='padding: 0px; margin-top: -25px; margin-bottom: -15px'>
    <v-col>
      <hr>
    </v-col>
  </v-row>
  <v-row>     
    <v-col md='4' class='text-center'>
      <img :src="article.image" class='article-image'>
    </v-col>      
    <v-col>
      <v-row>
        <v-col>
          <p>{{article.header}}</p>
        </v-col>
      </v-row>
      <v-row>
        <v-col class='text-center'>
          <a>>>> Read More <<<</a>
        </v-col>
      </v-row>
    </v-col>
  </v-row>

The final solution, including both read sections:

<template>
<v-container fluid class='content-body'>
  <v-row>
    <v-col cols="12">
      <h1 class="ml-2" style="display: inline">{{ item.title }}</h1>
      <span style="font-size: x-small">{{ item.date }}</span>
    </v-col>
    <v-col style='padding: 0; margin-top: -15px; margin-bottom: -15px' cols="12">
      <hr />
    </v-col>
    <v-row v-if='!readMore' class='mb-1 pr-1 pl-1'>
      <v-col md="4" class="text-center">
    <v-img class="ml-1 mr-1 mb-1 article-image" :src="item.image"/>
      </v-col>
      <v-col md="8">
    <v-row class="fill-height" dense>
      <v-col cols="12" class='mb-2 ml-1 mr-1'>
            <h3>{{ item.header }}</h3>
      </v-col>
      <v-col cols="12" class="text-right pb-0 mb-0" align-self="end">
            <v-btn color='#0a0a0a' class='blue--text mr-0' v-on:click="showMore">Read More</v-btn>
      </v-col>
    </v-row>
      </v-col>
    </v-row>    
    <v-row v-else class='mb-1 pr-1 pl-1'>
      <v-col cols='12'>
    <nuxt-content :document='item'/>
      </v-col>
      <v-col cols="12" class="text-right" align-self="end">
        <v-btn color='#0a0a0a' class='blue--text mr-0' v-on:click="showLess">Read Less</v-btn>
      </v-col>
    </v-row>
  </v-row>
</v-container>
</template>

Answer 1

You need to use the <v-col align-self="end"> attributes to align the y-axis.
I fixed your code. Here is the code snippet.

<v-row>
  <v-col cols="12">
    <h1 class="ml-2" style="display: inline">{{ article.title }}</h1>
    <span style="font-size: x-small">{{ article.month }}.{{ article.day }}.{{ article.year }}</span>
  </v-col>
  <v-col
    cols="12"
    ><hr />
  </v-col>
  
  <v-col md="4" class="text-center">
    <v-img class="ml-2 mb-3" :src="article.image" height="200px"/>
  </v-col>
  
  <v-col md="8" class="text-center">
    <v-row class="fill-height mr-2" dense>
      <v-col cols="12">
        <p>{{ article.header }}</p>
      </v-col>
  
      <v-col cols="12" class="text-right" align-self="end">
        <a>>>>Read More<<<</a>
      </v-col>
    </v-row>
  </v-col>
</v-row>

The full code you can see in the CodePen. The result is as shown below.

Answer 2

Try this:

 <v-row>
    <v-col>
      <h1 style='display: inline'>{{article.title}}</h1> <span style='font-size: x-small'>{{article.month}}.{{article.day}}.{{article.year}}</span>
    </v-col>
  </v-row>
  <v-row style='padding: 0px; margin-top: -25px; margin-bottom: -15px'>
    <v-col>
      <hr>
    </v-col>
  </v-row>
  <v-row>     
    <v-col md='4' class='text-center'>
      <img :src="article.image" class='article-image'>
    </v-col>
    <v-col class="d-flex">
      <v-row>
        <v-col>
          <p>{{article.header}}</p>
        </v-col>
      </v-row>
      <v-row class="align-self-end">
        <v-col class='text-end'>
          <a>>>> Read More <<<</a>
        </v-col>
      </v-row>
    </v-col>
  </v-row>