How to align Date regardless the length of comments

As shown in the picture

I want the date to always be aligned to the far left, regardless of the length of the comment, just like the longest comment.

My related current code is as follows:

LatestReviewList.vue

This is the outermost part.

<template>
  <div class="card">
    <div class="latest-reviews-container">
      <span class="latest-reviews-text">全站最新点评</span>
    </div>
    <br>
    <br>
    <PostPreViewList
      :showAuthor="true"
      :showAvatar="true"
      @update:array-size="handleArraySizeChange"
    />
    <Pagination :totalNum="childArraySize"/>
  </div>
</template>

<style lang="css" scoped>
.card {
  width: 1000px;
  margin: 0 auto;
  background-color: var(--background-color);
  padding: 16px;
  box-shadow: 0 2px 4px var(--border-color);
  border-radius: 8px;
}
.latest-reviews-container {
  text-align: center;
  margin-top: 10px;
  width: 100%;
}
</style>

PostPreViewList.vue

This is the list.

<template>
    <div v-for="(post, index) in posts.slice(0, displayNum)" :key="index">
      <PostPreView
        :author="post.author"
        :avatar="post.avatar"
        :time="post.time"
        :course="post.course"
        :teacher="post.teacher"
        :content="post.content.comment"
        :showAuthor="showAuthor"
        :showAvatar="showAvatar"
      />
    </div>
</template>

PostPreView.vue

This is the component

<template>
    <div class="review-container">
        <t-space>
            <div v-if="showAvatar" class="avatar-container">
                <t-avatar  size="50px" :image="avatar" alt="用户头像" shape="circle" />
            </div>
            <div class="info-container">
                <t-space direction="vertical">
                    <div class="top-row">
                        <t-space>
                            <router-link v-if="showAuthor" :to="{name: 'user', params:{id : 1}}">
                            <span  class="author">
                                {{ author }}
                            </span>
                            </router-link>
                            <span v-if="showAuthor" class="tip">点评了</span>
                            <router-link :to="{name: 'course', params:{id : 1}}">
                            <span class="course-teacher"
                            :class="{'large-font': !showAuthor}">
                                {{ course }}({{ teacher }})
                            </span>
                            </router-link>
                        </t-space>
                        <span class="time">{{ time }}</span>
                    </div>
                    <div class="content-container">
                        <span class="content">
                            {{ truncatedContent }}
                            <router-link :to="{name: 'course', params:{id : 1, reviewId: 1}}">
                            <span class="read-more">>>更多</span>
                            </router-link>
                        </span>
                    </div>
                </t-space>
            </div>
        </t-space>
        <t-divider />
    </div>
</template>

<style scoped lang="scss">
    a {
        text-decoration: none;
    }
    .review-container {
        padding: 10px 0;
        width: 100%;
    }
    .avatar-container {
        margin-right: 10px;
    }
    .content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.8;
        font-size: 14px;
        color: var(--text-color);
    }
    .read-more {
        color: var(--read-more-color);
        cursor: pointer;
        margin-left: 4px;
    }
    .info-container {
        display: flex;
        flex-direction: column;
        width: 100%; /* 确保占据整个可用空间 */
    }
    .top-row {
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: space-between; /* 左右分布 */
        width: 100%;
    }

    .time {
        color: var(--date-color);
        font-size: 12px;
        margin-left: auto; /* 如果不使用 space-between，也可通过 margin-left: auto 推到右侧 */
    }
    .author {
        font-weight: bold;
        color: var(--author-name);
    }
    .content-container {
        display: flex;
        width: 100%;
    }
    .course-teacher {
        font-weight: bold;
        color: var(--course-teacher-color);
    }
    .large-font {
        font-size: 18px;
    }

</style>

In the component’s style section, I set the width of all containers to 100%, but they don’t fill the outer container as I expected. Instead, the width of the top-row ultimately ends up being the same as the comment-container, and I thought the info-container should be the same. In other words, the width is determined from the inside. However, I don’t want to handle it this way. I want their width to be fixed and fill the outer container. But I can’t set a fixed length, so I don’t know what to do.