how to solve angular material with mat-line-end

Question

can anyone explain why this can happen? when I use this command

<mat-list>
<mat-list-item>
  <img matListAvatar>
  <mat-divider></mat-divider>
  <p mat-line-end class="abu">Andika Ristian</p>
  <p mat-line class="abu">My Name Is</p>
   <img mat-line-end src="assets/imgs/panah.png">
</mat-list-item>
</mat-list>

the result will be like this

but if i use the command like this with the same font as above.

<mat-list>
<mat-list-item>
  <img matListAvatar>
  <mat-divider></mat-divider>
  <p mat-line-end class="abu">Andika </p>
  <p mat-line-end class="abu">Ristian&nbsp;</p>
  <p mat-line class="abu">My Name Is</p>
   <img mat-line-end src="assets/imgs/panah.png">
</mat-list-item>
</mat-list> 

The result will be like this

I'm expected the result like the second picture but i think if i use the second command, it's not a solution to solve this. And for addition, i try to make the text align is right. the result will be like this

as the image above, the text is not same line with the other one. Thanks before

Answer 1

Just increase the width of your name.

.abu {
    width: 150px;
}