Динамическое расположение содержимого в соответствии с содержимым верхнего элемента

Question

Содержимое тега <p> загружается динамически и имеет разную высоту. Я использовал ion-button положение как фиксированное top и т. Д., Например. margin-top: -20px;. Но это не будет работать на p имеет большие данные. Так можете ли вы сказать мне, как справиться с этим? т.е. мне нужно динамически отрегулировать положение ion-button.

.html

<ion-row>
  <ion-col size="12">
    <h3 class="title">{{ data?.name }}</h3>
    <p class="opening" [innerHTML]="data?.workingHours"></p>
    <ion-button *ngFor="let button of data.buttonlinks" fill="outline" 
      class="menu-button" color="primary">
      {{ button.name }}</ion-button>
    <div class="inner-html" [innerHTML]="data.description"></div>
  </ion-col>
</ion-row>

.scss

.opening {
    font-size: 14px;
    font-weight: 500;
    color: #4A4A4A;
}

.menu-button {
    margin-top: -20px;
    margin-bottom: 16px;
    margin-left: 16px;
}

UI:

Answer 1

.menu-button {
    position: absolute; 
    top: 20px;
    right:20px;
}