Float:right is limited by its parent div, making it align right/go down a line

Question

I'm trying to get a toolbar div, with the left div aligned on the left and the right div aligned on the very right of the screen.

I've tried setting a fixed divider setting for the parent divider, but none of the methods exactly seem intuitive. I can't use 100vw for the parent div since there's a toolbar on the left.

.dashboard_secondary_toolbar{
    /* display:inline-block; */
    flex: 1;
}

.dashboard_secondary_toolbar_left{
    float: left;
}

.dashboard_secondary_toolbar_right{
    float: right;
}

<div class = "dashboard_secondary_toolbar">
    <div class = "dashboard_secondary_toolbar_left">
        <p> align me left </p>
    </div>
    <div class = "dashboard_secondary_toolbar_right">
        <p> align me right </p>
    </div>
</div>

Answer 1

just use flex instead of float each div

.dashboard_secondary_toolbar {
  display: flex;
  flex: 1;
  justify-content: space-between;
}

<div class="dashboard_secondary_toolbar">
  <div class="dashboard_secondary_toolbar_left">
    <p> align me left </p>
  </div>
  <div class="dashboard_secondary_toolbar_right">
    <p> align me right </p>
  </div>
</div>