Ионная строка показывает все элементы в одной строке

Question

Я должен показать курс перевернутой валюты в случае, если щелкнул обратный значок (повернутый значок свопа).Однако мой перевернутый значок всегда скользит в новую строку.Как я могу избежать этого?Мне нужно сохранить это в той же строке, что и с другими элементами в строке.У меня ничего нет на левой стороне.

  <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 ;
      }

Мой Scss:

.rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  padding-right: 10px;
}

Скриншот:

Answer 1

Поскольку вы сказали, что размер содержимого изменяется, кнопка не получает достаточно места, поэтому она переходит на следующую строку.

Решением этого будет назначено фиксированное значение для кнопки, группирование оставшегося содержимого и использование

width:calc(100% - 30px); 

для оставшегося содержимого.

Обратите внимание, что width:calc(100% - 30px) также должен учитывать любое поле, примененное к кнопке или содержимому.

.inner{
  display:inline:block;
  width:calc(100% - 30px); /*30px. should be same as button width */ 
}
.buuton{
  width:30px;
}

<ion-row>

  <div col-7 offset-5 no-padding text-right>
    <div class="inner">
      <ion-label *ngIf="!showInverted" no-margin class="rate label-tx">1 </ion-label>
      <ion-label *ngIf="showInverted" no-margin class="rate label-tx">1 </ion-label>
    </div>
    <button (click)="showInvertedRate()" ion-button clear color="dark">  <ion-icon name="swap" class="rotate90"></ion-icon></button>
  </div>
</ion-row>