Align the first div on the same height with the second div, the first div should be placed closest to the left and the second closeste to the right

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>

Use Flexbox with justify-content: space-between

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

<div class="container">

  <div>
    totalElements
  </div>

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

</div>

<!-- end snippet -->