【Vue.js】2つの要素の下に、要素の幅分の1本線を引きたい

前提・実現したいこと

初心者です。
画像、テキストが入っている要素を横に2個並べて
2個の要素の幅分、下に1本線をを入れたいと考えております。

現在は要素1つ1つにボーダーを入れているような状況で
テキストを入れると要素の大きさが変わり、線の高さが変わってしまうので
タイトル１とタイトル２の上にある線と同じような幅の線を下に１本引き、
要素の大きさは一定の大きさから変わらないようにしたいです。

画像とテキストはv-forで表示するようにしています。

以上について、もしおわかりの方がいらっしゃいましたらご教示いただけますと幸いです。

該当のソースコード

<template>
  <div class="Hogehoge">
    <v-toolbar color="base-primary" flat>
      <v-btn class="Hogehoge-return" text depressed @click="historyBack()">
        <div class="Hogehoge-return-img" />
      </v-btn>
      <div class="Hogehoge-title">タイトル</div>
    </v-toolbar>
    <p class="Hogehoge-line" />
    <div class="Hogehoge-area-topimg" />

    <v-row class="Hogehoge-area" display="flex">
      <div v-for="item in getHogehogeItems" :key="item.id">
        <v-col cols="12" v-for="n in 1" :key="n" class="Hogehoge-area-link" @click="clickItem(item)">
          <img class="Hogehoge-area-img" :src="item.path" />
          <div class="Hogehoge-area-title">{{ item.title }}</div>
          <div class="Hogehoge-area-text">{{ item.text }}</div>
        </v-col>
      </div>
    </v-row>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters('top', ['getHogehogeItems'])
  },

  mounted() {
    this.setViewPage({ pageName: 'Hogehoge' });
  },

  methods: {
    ...mapActions(['setViewPage']),

    clickItem(item) {
      console.log(item);
    },

    historyBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .v-btn:not(.v-btn--round).v-size--default {
  font-size: 27px;
  min-width: 27px;
  position: absolute;
}

.Hogehoge {
  width: 100%;
  margin: 0 auto;
  position: relative;
  justify-content: center;

  &-return {
    &-img {
      background-image: url('../assets/images/arrow_left.png');
      background-size: contain;
      margin: 0 auto;
      width: 27px;
      height: 27px;
      padding: 0px 0px 0px 0px;
      position: absolute;
    }
  }

  &-title {
    color: black;
    margin: 0 auto;
  }

  &-line {
    margin: 0 auto;
    border-bottom: 1px solid black;
    max-width: 90vw;
  }

  &-area {
    width: 100vw;
    margin: 0 auto;
    margin-bottom: 20vw;
    position: relative;
    display: flex;
    justify-content: center;

    &-topimg {
      background-image: url('../assets/images/demo/nyanko.jpeg');
      width: 90vw;
      height: 70vw;
      margin: 0 auto;
      margin-top: 10%;
      background-size: contain;
      border-bottom: 1px solid black;
    }

    &-img {
      margin: 0;
      width: 43vw;
      display: block;
    }

    &-title {
      width: 43vw;
      display: block;
      font-size: 1em;
      font-weight: 700;
      margin-top: 10px;
    }

    &-text {
      width: 43vw;
      color: #666;
      display: block;
      margin-top: 5px;
      margin-bottom: 15px;
      font-size: 0.8em;
    }
  }

  .col {
    padding: 0;
    width: 100%;

    &-12 {
      margin: 0 auto;
      margin: 10px 6px 20px 6px;
      cursor: pointer;
      border-bottom: solid 1px;
    }
  }
}
</style>