Bootstrap 4 - How to float-right an element until it moves to its own line?

Question

I am new to Bootstrap, and have been able to find only one other person who has asked this question. They didn't get a valid answer, so I'm asking it again.

I have two button groups. On larger screen sizes, they should appear on the same line, one left aligned and one right aligned. When the screen becomes small enough, the right aligned element drops down to the next line. This is currently working as intended. What isn't currently functional is I want the right aligned element to become left aligned when this shift takes place. The issue I (and the above post) are having is that one of the elements is dynamically sized, so simply using Bootstrap breakpoints isn't an option. The shift needs to be dynamically based on the size available to the right aligned button group, not the absolute size of the window in question.

My current HTML is below.

<div class = "btn-group grouped-buttons btn-group-toggle" data-toggle="buttons" style = "margin: 25px">
    <!-- Dyanimcally sized button group left aligned-->
    <button *ngFor = "let type of typeList" class = "btn btn-default" type = "button" (click) = "catagoryFilter(type.name)" [ngClass] = "{'active': typeSelect == type.name}">{{type.name}}</button> 
</div>
<div class = "btn-group grouped-buttons btn-group-toggle float-right" data-toggle="buttons" style = "margin-top: 25px">
    <!-- Fixed size button group which should only float-right when not on its own line -->
    <button class="btn btn-red" type="button" (click)="newSpeciesModal.show()"><fa-icon [icon]="addIcon"></fa-icon> New Species</button>
    <button class="btn btn-blue" type="button" (click)="newSpeciesTypeModal.show()"><fa-icon [icon]="addIcon"></fa-icon> New Species Type</button>
</div>

Answer 1

You could put the elements into a container which has display: flex.

If you give it justify-content: space-between that will ensure the second element is to the far right when both fit on the same line.

Adding also flex-wrap: wrap ensures that if there isn't enough space the second element will move down (and to the left).

Here's a simple example:

body {
  width: 100vw;
  height: 100vh;
}

.container {
  width: 100%;
  height: 20%;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.container :nth-child(1) {
  height: 100%;
  background-color: red;
}

.container :nth-child(2) {
  width: 20%;
  height: 100%;
  background-color: blue;
}

<div class="container">
  <div style="width:30%;"></div>
  <div></div>
</div>
<div class="container">
  <div style="width:90%;"></div>
  <div></div>
</div>