CSS - Fix layout of line on header to make consistent - css

Question

Be a hard one to explain so I hope that I will provide enough descriptive information. I have a header which takes advantage of the profile container function and also using the profile-stats with stats-col. Currently, it is laid out as the following but I would like to modify it so the lines are consistent and go straight down.
My code for that is the following:
.profile-container .profile-header .profile-stats .stats-col:not(:last-child) {
border-right: 1px solid #eeeeee;
}
.profile-container .profile-header .profile-stats .stats-col .stats-value {
display: block;
margin: 0 auto;
text-align: center;
font-size: 30px;
font-family: 'Open Sans', 'Segoe UI';
HTML
<div ng-hide="isNewSite">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="col-xs-6 col-md-6 text-align-left no-padding-left">
<h4>Site Entitlements View</h4>
</div>
<div class="pull-right">
<button class="btn btn-sky" ng-click="toggleButtonFunctionality()">
{{editButtonText}}
</button>
<button class="btn btn-darkorange" ng-click="handleDelete()" title="{{disableDeletionReason}}">
Delete Site
</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="profile-container">
<div class="profile-header row">
<div class="col-lg-2 col-md-4 col-sm-12 text-center">
<img src="assets/img/PICTURE.png" alt="" class="header-avatar"/>
</div>
<div class="col-lg-5 col-md-8 col-sm-12 profile-info">
<div class="header-fullname">{{targetEntity.siteName}}</div>
<span ng-bind-html="renderEntityState(targetEntity.status)"></span>
<div class="header-information" style="font-size:15px">
{{targetEntity.address1}}
<br>{{targetEntity.city}} </br>
{{targetEntity.postCode}}
<br>{{targetEntity.country}} </br>
</div>
</div>
<div class="col-lg-5 col-md-12 col-sm-12 col-xs-12 profile-stats">
<div class="row" >
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 stats-col" >
<div class="stats-value purple">{{serviceTotal}}</div>
<div class="stats-title">SERVICES</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 stats-col">
<div class="stats-value purple">{{siteSubjectsTotal}}</div>
<div class="stats-title">SUBJECTS</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 stats-col">
<div class="stats-value purple">
<a ui-sref="app.client-details({clientId:entity.clientIdId})"
ui-sref-active="active" class="purple">{{targetEntity.clientName}}
</a>
</div>
<div class="stats-title">CLIENT</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I do know that if I remove the .stats.-col then it does become consistent in the look but I still want the space between the values.
So I am wondering does anyone know what I could do? If you need further explanation I am happy to help.