align in one line text and icon – angular css

Issue

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.

Answered By – Abdul Samad

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published