Having trouble aligning elements in my Angular app - specifically date, file total, and file size. When one number has more digits than the others, it throws off the alignment. I've attempted adjusting padding margins and using display properties like Flex, inline, and inline-block. My goal is to have each element start at the same point regardless of differing digit lengths; for example, Apr 1, 2019 1 file 3445 G should line up with Mar 28, 2019 34 files 29282 G.
The elements are within spans classed as jobdate-item-date, jobdate-item-file-total, and jobdate-item-file-length. Clicking on these reveals lists of job data. Here's a visual along with my current code -
HTML -
<div *ngFor="let date of selectedJob.dates" class="card-date-file">
<div class="detail-item" (click)="toggle()">
<span class="jobdate-item-date">{{ date.date | date: 'MMM dd, y' }}</span>
<span class="jobdate-item-file-total">{{ date.files.length }} files</span>
<span class="jobdate-item-file-length">{{ jobFileCalc(date.files) }} GB</span>
</div>
<ng-container *ngIf="show">
<div *ngFor="let file of date.files" class="list" >
<span class="file-item-filename">{{ file.filename }}</span>
<span class="file-item-incr">{{ file.incr? 'INCR':'FULL' }}</span>
<span class="file-item-time">{{ file.dttm | date:'h:mm' }}{{ file.dttm | date:'a' | lowercase }}</span>
<span class="file-item-size">{{ file.sizegb.toFixed(1)| number : fractionSize }} GB</span>
</div>
</ng-container>
</div>
</div>
CSS -
.jobdate-item-date {
padding: 0.1em 1.1em 0.3em 0.8em;
}
.jobdate-item-file-total {
padding: 0.3em 1.1em 0.3em 1.1em;
}
.jobdate-item-file-length {
padding: 0.3em 1.1em 0.3em 1.1em;
}