align in one line text and icon – angular css

I have grey row that should contain text and icons, my code:
{{ trans.dashboard.settings.car.Name| translate }} <i class="fas fa-caret-up"></i>

this works, but i wanna to text be on the left side as it is now and icon on the right side, so text on the left corner of the container and icon on the right corner, inside corner i write this code:

i { margin-left: 95px; }

but when margin left has higher pixels icon goes bellow text, they are not in the same line, how to create bigger space but still make those 2 elements into one line?

>Solution :

Just wrap the text and icon in a div. Assume that you are calling it container.

.container{
  display: flex;
  justify-content: space-between;
  width: 100%;

}

Set a minimum width of the container otherwise it will takes the parent width.