Place <span> items on the right side by using PrimeFlex

Question

I have the following structure of the js code in Angular. This is using PrimeFlex and I want to simply place <span>test</span> on the right side.

[Code]

<ng-template pTemplate="caption">
    <div class="p-d-flex">
        <a>
            <button>
            </button>
        </a>
        <a>
            <button></button>
        </a>
        <span>test</span>
        <span class="p-input-icon-left p-ml-auto">
            <i class="pi pi-search"></i>
            <input/>
        </span>
    </div>
</ng-template>

[Expected Result]

I am a new about PrimeFlex.. Which of the class values in the official PrimeFlex doc should I put inside of <span>? https://www.primefaces.org/primeflex/migration

Any advice, please

Answer 1

Split the contents of p-d-flex div into two parts and use p-jc-between

<div class="p-d-flex p-jc-between">
  <div>
    <a>
      <button></button>
    </a>
    <a>
      <button></button>
    </a>
  </div>
  <div>
    <span class="p-as-end">test</span>
    <span class="p-input-icon-left p-ml-auto">
      <i class="pi pi-search"></i>
      <input />
    </span>
  </div>
</div>