Create repeated horizontal dividers between icon images - html

Question

This is what it currently looks like:
I'm having trouble putting horizontal dividers between my icon images using angular, html, css. What I want to achieve is:
icon ---------- icon ---------- icon --------- icon
This is my code:
<div *ngFor="let item of parking; let i = index">
<div *ngIf="i == 0 || i == 1 || i == 2" class="divider">
<img src="http://cdn.appwinit.com/home/{{ item.image }}/image.png" alt="{{ item.title }}" srcset="http://cdn.appwinit.com/home/{{ item.image }}/image#2x.png 2x, http://cdn.appwinit.com/home/{{ item.image }}/image#3x.png 3x" style="height: 69px; width: 69px; display: block; margin: auto;"/>
<span class="horizontal-divider"></span>
</div>
<div *ngIf="i == 3" class="divider">
<img src="http://cdn.appwinit.com/home/{{ item.image }}/image.png" alt="{{ item.title }}" srcset="http://cdn.appwinit.com/home/{{ item.image }}/image#2x.png 2x, http://cdn.appwinit.com/home/{{ item.image }}/image#3x.png 3x" style="height: 69px; width: 69px; display: block; margin: auto;"/>
</div>
</div>
<div *ngFor="let item of parking; let i = index" class="col-xs-12 col-sm-3">
<p class="color-blue text-uppercase" style="font-size: 13px; margin-top: 20px;">{{ item.title }}</p>
<p class="opacity-65" style="font-size: 13px;" [innerHTML]="short ? item.short : item.body"></p>
</div>
This is my css:
div.divider {
display: flex;
flex-direction: row;
align-items: center;
}
div.divider {
flex-shrink: 0;
}
div.divider span.horizontal-divider {
width: 100%;
flex-shrink: 1;
border-bottom: 1px solid black;
margin: 5px
}