Показать кнопку «Переводы» в дальнем правом углу

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>

Я пытаюсь отобразить кнопку передачи в правом углу, чтобы она выглядела как на картинке выше. Как я могу сделать это? Я попытался создать кнопку и класс, который тянет кнопку вправо. когда я компилирую код, кнопка перевода показывает под суммой счета

Answer 1

Вы можете добавить position: absolute к вашей кнопке перевода.

.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>