CSS moving button to right side

Question

I am using bootstrap and angular material for the UI. In one of my div. I want to move my button to the right side but when I do apply class "float-right" it is going behind the other div. This is the image URL https://prnt.sc/y0xn90 Below is the code.

<div class="card-body">
        <div class="tab-content">

          <!-- /.tab-pane -->
          <div class="active tab-pane" id="timeline">
            <div>
              <button mat-raised-button color="primary">Add Treatment</button>
            </div>
            <div>
              <ul class="timeline" *ngFor="let treatment of patientTreatments">
                <li class="timeline-item bg-white rounded ml-3 p-4 shadow">
                  <div class="timeline-arrow"></div>
                  <h2 class="h5 mb-0">{{treatment.title}}<span class="float-right" style="cursor: pointer;">
                      <mat-icon>edit</mat-icon>
                    </span></h2>
                  <span class="small text-gray"><i class="fa fa-clock-o mr-1"></i>{{treatment.treatmentDate}}</span>
                  <p class="text-small mt-2 font-weight-light">{{treatment.summary}}</p>
                  <div *ngFor="let files of treatment.treatmentFiles">
                    <img src="" alt="Treatment image">
                  </div>
                </li>
              </ul><!-- End -->
            </div>
            <!-- The timeline -->
          </div>
          <!-- /.tab-pane -->

          <div class="tab-pane" id="settings">
            111
          </div>
          <!-- /.tab-pane -->
        </div>
        <!-- /.tab-content -->
      </div><!-- /.card-body -->

Answer 1

you can use the display flex property with the width 100% and u can push left or right side with flex-end/flex-start

        <div style="width: 100%;display: flex;justify-content: flex-end;align-items: center;">
          <button mat-raised-button color="primary">Add Treatment</button>
        </div>