Html 离子行显示同一行中的所有元素

我必须显示反向货币汇率，以防单击反向图标旋转交换图标。然而，我的反转图标总是滑入新行。我怎样才能避免呢？我需要将其与行中的其他元素保持一致。我左边什么也没有

  <ion-row>

   <div col-7 offset-5 no-padding text-right>
     <ion-label  *ngIf="!showInverted" no-margin  class="rate label-tx">1 {{transaction.SendCurrency}} = {{transaction.ExchangeRate | amountFormat}} {{transaction.PayoutCurrency }}</ion-label>
     <ion-label *ngIf="showInverted" no-margin  class="rate label-tx">1 {{transaction.PayoutCurrency}} = {{1/transaction.ExchangeRate | amountFormat}} {{transaction.SendCurrency }}</ion-label>
     <button (click)="showInvertedRate()" ion-button clear color="dark">  <ion-icon name="swap" class="rotate90"></ion-icon></button>
   </div>
 </ion-row>

In my Ts file:

     showInvertedRate()
      {
        this.showInverted = !this.showInverted ;
      }

截图：

---

既然你说了，内容会调整大小，按钮没有足够的空间，因此它会转到下一行

此问题的解决方案将使用“分配固定到”按钮，将剩余内容分组并使用

width:calc(100% - 30px); 

对于重拍内容

注意宽度：calc100%-30px还应考虑应用于按钮或内容的任何边距

.内部{ 显示：内联：块； 宽度：calc100%-30px；/*30px。应与按钮宽度相同*/ } 布顿先生{ 宽度：30px； } 1. 1.

---

单击“反转”时，反转货币值的宽度是否发生变化？是的，取决于货币。这是如何处理的一个小片段会很好，或者你可以在我提供的片段上工作。在我的解决方案上尝试这个。

width:calc(100% - 30px);