I need help formatting a simple list item with three DIVs. The first DIV should be left justified, the second should be able to grow as needed, and the third should be right justified. I currently have them stacked side by side, but can't get the last DIV to right justify. Here's what it looks like now:
https://i.stack.imgur.com/nmPRN.jpg
<li *ngFor="let script of scripts" [class.selected]="script === selectedScript" (click)="onSelect(script)">
<div class="container">
<div class="left">
<span class="badge">{{script.scriptOrderID}}</span>
</div>
<div class="center">
<span>{{script.scriptName}}</span>
</div>
<div class="right">
<span class="badge2">{{script.scriptID}}</span>
</div>
</div>
</li>
This is how I want it to look: https://i.stack.imgur.com/Kw05U.jpg
.container {
display: flex;
}
.left {
width: 70px;
}
.center{
display: flex;
}
.right{
}