[CSS] - 크기 다른 container 각 각 가운데 정렬 방법

<div class="status-bar">
		<div class="status-bar__c">
			<span>No service</span>
			<i class="fas fa-wifi" ></i>
		</div>
		<div class="status-bar__c">
			<span>19:49</span>
		</div>
		<div class="status-bar__c">
			<span>100%</span>
			<i class="fas fa-battery-full fa-lg"></i>
			<i class="fas fa-bolt"></i>
		</div>
	</div>

.status-bar{
 display: flex;
 justify-content: space-between;
}

html코드가 위와 같은 경우 19:49부분이 justify-content : space-between시 정가운데로 배치되지 않는다.

.status-bar{
  display: flex;
  justify-content: center;
  padding:5px 3px
}
.status-bar__c{
  width: 33%;
}
.status-bar__c:first-child span{
  margin-right: 5px;
}
.status-bar__c:nth-child(2) {
  display:flex;
  justify-content: center;
}
.status-bar__c:last-child {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

1.각각 요소를 가리키는 status-bar__C의 width를 3등분(33%)한다.
2.첫 번째 child는 유지
3.두 번째 child 내부를 justify-content:center로 가운데로 정렬
4.세 번째 child 내부를 justify-content:flex-end로 오른쪽 정렬