请问怎么把列表里的纵向内容对齐？

Question

如图，在该app的卡片列表中，右侧的商品没有对齐，影响界面美观。右侧的产品名称有可能长有可能短，长的有7-8个字，短的有2-3个字，请问该如何调整让它整体看起来更舒适呢？

<!-- 存款列表 -->
                
                
                <view class="depositList">
                    <view class="depositList_header">
                        <view class="depositList_title">明星存款</view>
                        
                    </view>
                    
                    <view class="depositList_content">
                        <view v-for="(item,index) in depositListData" :key="index"
                              @click="getDetails(item)"
                              class="depositList_item">
                                <view class="content_left">
                                    <view class="annualRate_value">{{item.annualRate}}%</view>
                                    <view class="annualRate_text">满期利率</view>
                                </view>
                                
                                <view class="content_right" style="text-align: center;">
                                    <view class="depositName">{{item.name}}</view>
                                    <view class="depositDue" style="margin-top:3px">期限{{item.term}}天</view>
                                </view>
                            
                        </view>
                            
                        
                        <view @click="changeFoldState" class="more">
                            <view class="moreText" v-if="foldText">
                                {{foldText}}
                                <van-icon name="arrow-down" size="12px" v-if="isFold"/>
                                <van-icon name="arrow-up" size="12px" v-else/>
                            </view>
                        </view>
                    
                    </view>
                </view>
            
        

上为html，下为css

.depositList_title{
                font-size: 18px;
                font-weight: 600;
                position: absolute;
                top: 5px;
                left: 8px;
                margin-bottom: 7px;
        }
        .depositList{
            padding: 10px;
            min-width:80vw;
            min-height:200px;
            margin-top: 10px;
            box-shadow: 0 0 5px #A6A6A6;
            border-radius:10px;
        }
        
        .depositList_header{
            display: flex; 
            position: relative
        }
        .depositList_item{
            margin-top: 8px;
            padding-bottom: 8px;
            display: flex;
            position: relative;
            border-bottom: 1px solid #e7eaec !important;
        }
        
        .header_right{    
            position: absolute;
            top: 5px;
            right:8px;
            font-size: 12px;
        }
        
        .depositList_content{
            margin:0 5px;
            margin-top:5px;
            padding-top:25px;
        }
        .content_right{
            position: absolute;
            right:5px
        }
        .depositName{
            font-size: 16px;
            font-weight: 500;
            color:#383838
        }
        .depositDue{
            font-size:12px;
            color:#999999
        }
        
        .annualRate_value{
            font-size:20px;
            font-weight: 600;
            color: rgb(215,0,15);
        }
        .annualRate_text{
            font-size:12px;
            color:#999999
        }

请赐教，不胜感激。

Answer 1

 style="text-align: right;"