In the container div I need to have the two sub divs placed at the same height. The first div (Total elements) should be anchored closest to the left of the page and the second div (The button) closest to the right.

<div class="p-grid p-dir-col">

    <div class="p-col">

        <div class="p-grid p-justify-between">

            Test

        </div>

    </div>

</div>

**<div class="container">**

<div *ngIf="searchLaunched" class="left-div" style="padding: 0.5em; font-size: 1.25em;">

    {{ totalElements }} élément<span *ngIf="totalElements > 1">s</span> trouvé<span *ngIf="totalElements > 1">s</span>

</div>

<div *ngIf="canCreate" class="p-grid p-justify-end p-nogutter btn-table-crud-top" style="margin-top: 0.5em;">

    <p-button (click)="addUser()" label="Créer utilisateur" title="{{ tooltips.creer }}"></p-button>

</div>

</div>
</div>

</div>

<p-table>
Test
</p-table>

>Solution :

Use Flexbox with justify-content: space-between

div.container {
  display: flex;
  justify-content: space-between;
}

<div class="container">

  <div>
    totalElements
  </div>

  <div>
    <button>create user</button>
  </div>

</div>