Get buttons on right in p-header-CodePudding

This should be simple. I'm using Angular/PrimeNG 14 and PrimeFlex.

I have a p-header in a p-panel. In the p-header I want text on the left and two buttons on the right. Here's the .html:

<div>
  <p-panel>
    <p-header>
        <span >
            Header Text
        </span>
        <span  >
              <button pButton icon="pi pi-plus"  ></button>&nbsp;
              <button pButton icon="pi pi-trash" ></button>
        </span>
    </p-header>
  </p-panel>
</div>

Here's what it looks like:

I've tried float:right, align-text:right, align-content-left, and everything I can think of with PrimeFlex but none of it had any effect at all.

What does it take to get the text on the left and the buttons on the right?

Edit:

I took some example code from

CodePudding user response：

Try this see can or not.

<p-header >
<span>Header Text</span>
<div>
<span>
<button pButton icon="pi pi-plus"  ></button>&nbsp;
<button pButton icon="pi pi-trash" ></button>
</span>
</div>
</p-header>

CodePudding user response：

From the migration guide:

p-header and p-footer are deprecated in favor or ng-template pTemplate="header or footer."

The correct layout is:

<p-panel>
  <ng-template pTemplate="header">
    Header Text
  </ng-template>
  <ng-template pTemplate="icons">
    <button pButton icon="pi pi-plus" ></button>
    <button pButton icon="pi pi-trash" ></button>
  </ng-template>
</p-panel>

StackBlitz