Html 在display flex上右对齐文本

我的代码如下：

<div className="listContent">
     <div>
        <div className="titleAndCounterBox">
           <div className="headerListTitle">{list.name}</div><br />
           <div className="headerListExpires">
                 <div>{formatTime(this.state.remainingTime).days}<span>{language.days}</span></div>
                 <div>{formatTime(this.state.remainingTime).hours}:{formatTime(this.state.remainingTime).minutes}:{formatTime(this.state.remainingTime).seconds}</div>
            </div>
        </div>
        <div><img src={images.header_listInfo_png} /></div>
        <div className="headerTotalCarsInTheList"><span>{totalCarsInTheList}</span></div>

    </div>
</div>

listContent（父div）如下所示：

标题计数器框如下所示：

我想要的是titleAndCounterBox中的文本是右对齐的。比如：

但我无法解释

---

有什么建议吗？

感谢我们的讨论，您可以稍微更改CSS:-）

.headerListTitle { 
   font-size: $portalFontSize - 1; 
   color: $portalBlueColor;

   margin-left: auto; 
   flex-basis: 58%; 
  //you could replace these 2 lines with below 2 lines if you wish

  //justify-content: flex-end;
  //flex-basis: 89% (same as below row)

} 

.headerListExpires { 
   font-size: $portalFontSize - 3; 
   color: $portalYellow; 
   flex-basis: 89%; 

   div:first-child { 
      margin-left: auto; 
      margin-right: 15px; 
   } 
}

---

这让人困惑，你说你希望里面的“文本”是正确的，那么你是说“33天10:15:13”文本？如果是，则这不是您提供的预期图像中的右侧。您是对的。文本对齐良好，但我希望标题栏的宽度更小。我希望它就像上一张照片一样。检查这个-它当时看起来不是已经很好了吗。我知道答案，但是你让我很难说出你到底想要什么。奇怪。是什么原因导致了这个问题？当我把你所有的

className

改成

class

时，我得到了想要的结果。你能确认一下吗。

.headerListTitle { 
   font-size: $portalFontSize - 1; 
   color: $portalBlueColor;

   margin-left: auto; 
   flex-basis: 58%; 
  //you could replace these 2 lines with below 2 lines if you wish

  //justify-content: flex-end;
  //flex-basis: 89% (same as below row)

} 

.headerListExpires { 
   font-size: $portalFontSize - 3; 
   color: $portalYellow; 
   flex-basis: 89%; 

   div:first-child { 
      margin-left: auto; 
      margin-right: 15px; 
   } 
}