Having trouble with moving numbers highlighted to the left with names in CSS. I've tried using flex direction and margin auto but can't achieve the desired result.
Here is my HTML code:
<section class="favorites">
<div class="category" *ngFor="let category of categoryKeys">
<div class="sub-header">{{category}}</div>
<app-custom-accordion [closeOthers]="true">
<ngb-panel [disabled]="panel.Tests.length === 0" *ngFor="let panel of testSelectionSession.FavoritesByCategory[category]"
id="{{panel.Id}}" [title] = "panel.Name">
<ng-template ngbPanelTitle>
<span class="test-length" style=""> {{ '(' + panel.Tests.length + ')'}}</span>
<div class="action-items">
<span class="icon-set" [ngClass]="{'same-day-2x': isSameDay(panel.Code), 'next-day-2x': isNextDay(panel.Code)}"></span>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" [name]="panel.Id + '-' + panel.Moniker" [ngModel]="checkAllTestsSelected(panel)"
(ngModelChange)="onPanelCheckboxUpdate($event, panel)" [id]="panel.Id + '-' + panel.Moniker">
<span class="custom-control-indicator"></span>
</label>
</div>
</ng-template>
</ngb-panel>
</app-custom-accordion>
Looking for assistance on how to move this tag to the left:
<span class="test-length" style=""> {{ '(' + panel.Tests.length + ')'}}</span>
Can anyone help me with this issue?