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

May 13, 2022

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>

>Solution :

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!