How to move a whole div to the right side - html

Question

How do I move a whole div element to the right side? At present both div:s are appearing side by side. Please see the image I provided, I want to make it work like that.
Please help me with this. Thanks in Advance
<div class="d-flex align-items-start summary" style="margin-bottom: 10px;">
<img [src]="imagePath" style="width: 150px;max-height: 150px;clip-path: square(22px at center);" class="mr-3 d-none d-sm-block"
alt="...">
<i (click)="inputFile.click()" *ngIf="isEditItems" style="color : white;left: 155px;
position: absolute; top: 28px; padding: 3px; background-color: rgb(0, 195, 255);
border-radius: 50%;font-size: 12px;"
class="fa fa-pencil fa-lg" aria-hidden="true"></i>
<div>
<div class="col-sm">
<div class="office-address-heading">
<b>Office Address</b>
</div>
<div class="d-flex align-items-center">
<i class="fa fa-map-marker fa-2x mr-2" aria-hidden="true"></i>
<address class="mb-0">
{{myprofile?.OfficeAddress}}
</address>
</div>
</div>
<hr />
<div class="col-sm">
<div class="office-address-heading">
<b>Communication Details</b>
</div>
<div class="d-flex align-items-center office-address-details">
<i class="fa fa-phone fa-2x mr-2" aria-hidden="true"></i>
<div>{{myprofile?.Phone}}</div>
<span class="d-flex align-items-center mail office-address-details">
<i class="fa fa-envelope fa-2x mr-2" aria-hidden="true"></i>
<div>
{{myprofile?.Email}}
</div>
</span>
</div>
</div>
</div>
</div>

Answer 1

Here we go please use this
.d-flex.align-items-start.summary {
display: flex;
flex-direction: row;
justify-content:space-between;
margin:auto;
max-width:1170px;
width:100%;
}
<div class="d-flex align-items-start summary" style="margin-bottom: 10px;">
<img src="https://image.flaticon.com/icons/svg/147/147144.svg" style="width: 150px;max-height: 150px;clip-path: square(22px at center);" class="mr-3 d-none d-sm-block"
alt="...">
<i (click)="inputFile.click()" *ngIf="isEditItems" style="color : white;left: 155px;
position: absolute; top: 28px; padding: 3px; background-color: rgb(0, 195, 255);
border-radius: 50%;font-size: 12px;"
class="fa fa-pencil fa-lg" aria-hidden="true"></i>
<div>
<div class="col-sm">
<div class="office-address-heading">
<b>Office Address</b>
</div>
<div class="d-flex align-items-center">
<i class="fa fa-map-marker fa-2x mr-2" aria-hidden="true"></i>
<address class="mb-0">
{{myprofile?.OfficeAddress}}
</address>
</div>
</div>
<hr />
<div class="col-sm">
<div class="office-address-heading">
<b>Communication Details</b>
</div>
<div class="d-flex align-items-center office-address-details">
<i class="fa fa-phone fa-2x mr-2" aria-hidden="true"></i>
<div>{{myprofile?.Phone}}</div>
<span class="d-flex align-items-center mail office-address-details">
<i class="fa fa-envelope fa-2x mr-2" aria-hidden="true"></i>
<div>
{{myprofile?.Email}}
</div>
</span>
</div>
</div>
</div>
</div>