align in one line text and icon - angular css-CodePudding

I have grey row that should contain text and icons, my code: {{ trans.dashboard.settings.car.Name| translate }} <i ></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?

CodePudding user response：

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.

CodePudding user response：

You probably don't want to set the margin yourself, but rather use flex-boxes in order to achieve this. You can just set

display: flex; 
justify-content: space-between;

to the row, which will lead to both childs being spaced on the left and right of this row.

CodePudding user response：

You can wrap both in a span tag. The parent (row) tag should have display: flex; and justify-content: space-between; declarations.