Right align icon in an ngFor <il> loop - html

Question

Would create a list of items and align icon at the right.
<ul class=" list">
<li *ngFor="let group of groupList">
<div class="list-item"><span>{{ group.name }} (ID {{group.code}} ) </span></div>
<div class="trash-icon">
<img src="assets/img/icon_trash.png" height="20" width="20"/>
</div>
</li>
</ul>
In CSS:
.list-item {
width: 300px;
display : inline-block;
}
.trash-icon {
float: right;
}
.trash-icon::after {
clear: both;
}
The first line is aligned correctly, however, the following lines are indented.
Here's a screenshot:
When I replace float by right align:

Answer 1

Use the flexbox display for that.
<ul class="list">
<li *ngFor="let group of groupList">
<div class="list-item"><span>{{ group.name }} (ID {{group.code}} ) </span></div>
<div class="trash-icon"><img src="assets/img/icon_trash.png" height="20" width="20"/></div>
</li>
</ul>
Your styles
ul.list li {
display: flex;
justify-content: center;
}
ul.list li div.list-item {
flex: 1 1 auto;
}
ul.list li div.trash-icon {
flex: 0 0 20px;
}

Answer 2

have you tried to replace .trash-icon float with text-align

Answer 3

The answer to the original question
You don't really need ::after pseudoclass when you want to clear floated items, you can just do the following:
.trash-icon {
float: right;
clear: both;
}
And here is the example:
.list-item {
width: 300px;
display : inline-block;
}
.trash-icon {
float: right;
clear: both;
}
<li>
<div class="list-item">
<span>SPAN 1</span>
</div>
<div class="trash-icon">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/rss_circle_color-256.png" height="20" width="20"/>
</div>
</li>
<li>
<div class="list-item">
<span>SPAN 2</span>
</div>
<div class="trash-icon">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/rss_circle_color-256.png" height="20" width="20"/>
</div>
</li>
<li>
<div class="list-item">
<span>SPAN 3</span>
</div>
<div class="trash-icon">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/rss_circle_color-256.png" height="20" width="20"/>
</div>
</li>