How to display buttons in a row in angular

Issue

For some reason when I added the third button, the buttons started showing in a column manner.

html:

   <div class="creator-button-container" *ngIf="isCurrentUserTheChannelCreator">
      <div *ngIf="isChannelEditable">
        <button mat-raised-button color="accent" type="button" (click)="openDialog()">Add field </button>
        <div *ngIf="isChannelReadyForBids">
          <button mat-raised-button color="accent" type="button" (click)="setState('in progress')">Open the channel for
            bidding
          </button>
        </div>
        <button mat-raised-button color="accent" type="submit">Save Channel</button>
      </div>
      
      <div *ngIf="form.value.state=='in progress'&&userId === channel.creator">
        <button mat-raised-button color="accent" type="button" (click)="setState('new')">Edit channel </button>
      </div>
    </div>

css:

.creator-button-container{
  background-color: red;
  display: inline-block;
  flex-direction: row;

}

I though the 'display: inline-block' would work but its not working

I looked at this solution but i didnt understand it: Angular - display buttons in rows of two

its weird because as soon as i added the third button, the buttons started being displayed as a column

Solution

Add buttons in div tag because div is block level element. Something like this:

<div>
  <div><button class="btn">B1</button></div>
  <div><button class="btn">B2</button></div>
  <div><button class="btn">B3</button></div>
</div>

Answered By - Saima Haji