'How to right align text inside a div for mutiline content using flexbox

I'm using flexbox model to align div items to the right. It works when the items has only one line, but when I have more than one line, only the first line is aligned right. If the div fills two or more lines the next lines get aligned to the left.

Notice the last div from first column, in bold.

Is that a way to get the multiline text right aligned for all the lines using flexbox?

/* CSS */
.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
    
.col-md-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-md-9 {
  flex: 0 0 65%;
  max-width: 65%;
  margin-left: 20px;
}
    
.item-first-col {
  justify-content: flex-end;
  border: 1px solid blue;
}

.item-second-col {
  border: 1px solid blue;
}

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}
<!-- HTML -->
<div class="wrapper">
  <div class="item-first-col col-md-3 d-flex">
    One line text
  </div>
  <div class="item-second-col col-md-9 d-flex align-items-center">
    Second column text
  </div>
  <div class="item-first-col col-md-3 d-flex">
    One line text
  </div>
  <div class="item-second-col col-md-9 d-flex align-items-center">
    Second column text
  </div>  
  <div class="item-first-col col-md-3 d-flex" style="font-weight: bold;">
    Here goes the text that fills two lines
  </div>
  <div class="item-second-col col-md-9 d-flex align-items-center">
    Second column text
  </div>  
</div>
htmlcssflexboxalignment


Solution 1:[1]

Simply use text-align: right;

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.col-md-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-md-9 {
  flex: 0 0 65%;
  max-width: 65%;
  margin-left: 20px;
}

.item-first-col {
  justify-content: flex-end;
  border: 1px solid blue;
  text-align: right;
}

.item-second-col {
  border: 1px solid blue;
}

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}
<div class="wrapper">
  <div class="item-first-col col-md-3 d-flex">
    One line text
  </div>
  <div class="item-second-col col-md-9 d-flex align-items-center">
    Second column text
  </div>
  <div class="item-first-col col-md-3 d-flex">
    One line text
  </div>
  <div class="item-second-col col-md-9 d-flex align-items-center">
    Second column text
  </div>  
  <div class="item-first-col col-md-3 d-flex" style="font-weight: bold;">
    Here goes the text that fills two lines
  </div>
  <div class="item-second-col col-md-9 d-flex align-items-center">
    Second column text
  </div>  
</div>

Thanks and best regards!

Solution 2:[2]

You can use text-align css property 

/* CSS */

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  text-align: right;
}

.text {
  text-align: right;
  width: 100%;
}

.col-md-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-md-9 {
  flex: 0 0 65%;
  max-width: 65%;
  margin-left: 20px;
}

.item-first-col {
  justify-content: flex-end;
  border: 1px solid blue;
}

.item-second-col {
  border: 1px solid blue;
}

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}
<!-- HTML -->
<div class="wrapper">
  <div class="item-first-col col-md-3  text">
    One line text
  </div>
  <div class="item-second-col col-md-9  align-items-center text">
    Second column text
  </div>
  <div class="item-first-col col-md-3  text">
    One line text
  </div>
  <div class="item-second-col col-md-9  align-items-center text">
    Second column text
  </div>
  <div class="item-first-col col-md-3 text" style="font-weight: bold;">
    Here goes the text that fills two lines
  </div>
  <div class="item-second-col col-md-9  align-items-center text">
    Second column text
  </div>
</div>

Solution 3:[3]

It is not possible to align text the way you want it using only Flexbox properties.

The reason for that appears in the Flexbox specification:

Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item.

In your example, you are able to align a single line of text, but it is not the text that is aligned, it is the anonymous block which contains it. That's why it works.

It won't work for multiple lines of text because writing more text simply increases the size of the anonymous block and stretches to fill the whole parent div. At that point, it doesn't matter what value you set justify-content to.

The only way to do what you want is using text-align:right on the parent div which the anonymous block will inherit, making the text it contains align to the right.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vishal Kalansooriya
Solution 2 Heet Vakharia
Solution 3 Sparrowhawk

Related Questions