Angular HTML equal height - html

Question

I am trying to set equal height for every single item in the list. Here as you can see in the picture some channels have companion channels(e.g CNN & HLN, BNN & CP24), they are having a different height setting as compared to the channels without any companion channels. How do I make it the same height? The second thing I am trying is to not have any channels get in the line of the alphabets(e.g the Cottage Life channel gets more to the left which gets in the line of the alphabets). Also how do I put a space between rows, I tried putting in which didn't work(e.g after the A head and its channels row i need to put a blank space).
<div class="container col-lg-8" style="float:Left">
<ul class="w3-ul w3-card-4" *ngFor="let head of channelDisplayHeads" style="clear:both">
<h1 align="center" style="background-color:#0083BC;">
<font color="white">{{ head }}</font>
</h1>
<ul *ngFor="let channel of channelList">
<li class="list-group-item logoDisplay" *ngIf="channel.channel.substr(0, 1) === head">
<div *ngIf="channel.compChannel.compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}">
<img class="img-rounded" src="{{ channel.compChannel.compChannelLogo }}" alt="{{ channel.channel.compChannelName }}">
</div>
<ng-template #noCompChannel>
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}">
</ng-template>
<br>
<span class="w3-left">
<mark>
<font size="1">{{ channel.cbsCode }}</font>
</mark>
</span>
<span class="w3-right">
<font size="2">{{ channel.pickCode }}</font>
</span>
</li>
</ul>
</ul>
</div>