scss shows maximum 2 buttons on the screen

Question

How do I correctly set the scss so that it shows maximum 2 buttons (precedence of showing the btns start from the top of the html) for example: if btn1,2,3,4,5 = true, shows only btn1 and btn2 if btn1,4,5 = true, shows only btn1 and btn4

there's an issue where it is showing 3 buttons when this.verified = false when there is a "span tooltip". when I remove the "span tooltip" , it does shows 2 buttons when this.verified=false.

<div class="button-group">
   <button>btn1</button>
   <span tooltip="" >
      <button (click)="checkAPI()" *ngIf="verified; else showOtherbtns">checkAPI</button>
   </span>
   <ng-template #showOtherbtns>
      <button *ngIf="showBtn2">btn2</button>
      <button *ngIf="showBtn3">btn3</button>
      <button *ngIf="showBtn4">btn4</button>
   </ng-template>
</div>

showBtn2=true;
showBtn3=true;
showBtn4=true;

get showBtn1() {
   this._service2.execute().subscribe((x) => {
       this.showBtn1 =  x.read;
   }) 
}
checkAPI() {
   this._service.execute().subscribe((x) => {
       this.verified =  x.verified;
   })

}

styles: ['

   .button-group {
      button:nth-of-type(n + 3) {
        display: none;
      }
    }
  ']