CSS moving button to right side - html

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>