Display Transfers Button at the far right corner - html

Question

<div class="account-tile" qa-name="accountBlock">
<a
*ngIf="link"
class="account-detail-header"
[routerLink]="'/AccountDetails/' + account.index!"
>
<div qa-name="accountName" class="account-name">
{{ account.accountName }}
</div>
<div qa-name="accountNumber" class="account-number">
...{{ account.number | lastFour }}
</div>
<span>
<i class="gg-chevron-right"></i>
</span>
</a>
<div *ngIf="!link" class="account-detail-header">
<div qa-name="accountName" class="account-name">
{{ account.accountName }}
</div>
<div qa-name="accountNumber" class="account-number">
...{{ account.number | lastFour }}
</div>
</div>
<div class="available-balance-container">
<div class="flex">
<span class="negative-account" *ngIf="account.availableBalance! < 0"
>-</span
>
<span
[ngClass]="link ? 'format-dollar-link' : 'format-dollar-display'"
class="format-dollar"
>
$
</span>
<h2 qa-name="availableBalance">
{{ account.availableBalance | currency: '':'' | absolute }}
</h2>
<!--This is wheere the transfer button appears-->
<div class="parent=class">
<button class="button-right pull-right">Transfer</button>
</div>
</div>
<h3>Available Balance</h3>
</div>
</div>
I am trying to display a transfer button at the right corner to look like the picture above. How can I accomplish that? I tried creating a button and a class that pulls the button to the right. when I compile the code, the transfer button shows underneath the Account amount

Answer 1

You can add position: absolute to your transfer button.
.parent-class {
position: relative;
height: 100px;
border: 1px solid red;
}
.button-right {
position: absolute;
right: 10px;
}
<div class="parent-class">
<button class="button-right">Transfer</button>
</div>