Right align text on display flex

Question

My code is as follows :

<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>

And my scss is as follows:

.listContent {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    font-family: $remarketingFontFamily;

    div {
      display: flex;
      align-items: center;

      .titleAndCounterBox {
        flex-wrap: wrap;

        .headerListTitle {
          font-size: $portalFontSize - 1;
          color: $portalBlueColor;
          flex-basis: 100%;
        }

        .headerListExpires {
          font-size: $portalFontSize - 3;
          color: $portalYellow;

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

      .headerTotalCarsInTheList {

        text-align: center;
        line-height: 40px;
        color: $portalDarkGrey;
        font-size: $infoTextSize + 6;
        border: 1px solid $portalDarkGrey;
        border-radius: 50%;
        margin: 0 15px;

        span{
          width: 40px;
          height: 40px;
        }
      }
    }


  }

The listContent (parent div) looks like this :

And the titleAndCounterBox looks like this :

What I want is that the text inside titleAndCounterBox is right aligned. Something like :

But I'm not able to acommplish that.

Any advice how can I do that?

Its confusing, you say you want the "text" inside to be right, so you mean the "33day 10:15:13" text ? If yes then this is not to the right in the expected image you provided — Nikhil Nanjappa, Oct 27 '16 at 12:12
You're right. The text is good aligned, but I want that the width of titleAndCounterBox is smaller. I want that it be just like on the last photo. — Boky, Oct 27 '16 at 12:14
Check this [Codepen](http://codepen.io/PleaseBugMeNot/pen/PGvYqW) - doesnt it already look right then. I know the answer but you are making it hard to tell what exactly you want. — Nikhil Nanjappa, Oct 27 '16 at 12:20
On Codepen well. Strange. Than something else causing the problem? — Boky, Oct 27 '16 at 12:25
When i changed all your `className` to `class` i got the desired result. Can you confirm. — Nikhil Nanjappa, Oct 27 '16 at 12:26
Yeah probably something else then, but just to be sure , use `justify-content: space-between;` as well in your `.listContent div` style. Check if this fixes the problem — Nikhil Nanjappa, Oct 27 '16 at 12:33
Do one thing, Use your browser dev tools to inspect all the styles affecting `titleAndCounterBox` and send a screenshot. Start a chat as well — Nikhil Nanjappa, Oct 27 '16 at 12:36
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126834/discussion-between-boky-and-nikhil-nanjappa). — Boky, Oct 27 '16 at 12:38

score 2 · Accepted Answer · answered Oct 27 '16 at 13:17

You could change your CSS slightly :-) thanks to our discussion

.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; 
   } 
}

Right align text on display flex

1 Answers1

Linked