как решить угловой материал с матовым концом линии

кто-нибудь может объяснить, почему это может произойти? когда я использую эту команду

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

результат будет таким:

но если я использую такую ​​​​команду с тем же шрифтом, что и выше.

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

Результат будет таким:

Я ожидаю, что результат будет похож на второе изображение, но я думаю, что если я использую вторую команду, это не решение для решения этой проблемы. И, кроме того, я стараюсь правильно выравнивать текст. результат будет таким:

как на изображении выше, текст не совпадает с другим. Спасибо перед