Group images with border - Angular - html

Question

I am trying to group some img's with a border.
As you see in the picture below the BNN & CP24 are combo channels and I used div element to create that border. The only issue I have here is when I use div element it changes the size of the combo channels. Here the BNN & CP24 combo channel is slightly taller than the individual channels. I dont have any CSS attached to the div element. Code with the div element below.
<div *ngIf="channel.compChannel[0].compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
<img class="img-rounded" src="{{ channel.compChannel[0].compChannelLogo }}" alt="{{ channel.compChannel[0].compChannelName }}"
width="100" height="100">
</div>
<div #noCompChannel>
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
</div>
But when i use ng-container I get actual size but I am not able to create a border on the combo channels. code with ng-container below.
<ng-container *ngIf="channel.compChannel[0].compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
<img class="img-rounded" src="{{ channel.compChannel[0].compChannelLogo }}" alt="{{ channel.compChannel[0].compChannelName }}"
width="100" height="100">
</ng-container>
<ng-template #noCompChannel>
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
</ng-template>