Как предотвратить наложение div и кнопок друг на друга?

Question

У меня есть три разных элемента. Два div и 1 кнопка. Я пытаюсь сделать так, чтобы они выглядели красиво и не перекрывали друг друга, но когда содержимое одного div больше, все разрушается. Я пытался использовать свойства overflow и min-height, но это не сработало. Что-нибудь посоветуете?

.lk .popup .popup-masterclass {
  position: relative;
  height: 48px;
}

.lk .popup .masterclass-text {
  position: absolute;
  top: 0;
  left: 138px;
}

.lk .popup .popup-roundtable {
  position: relative;
  height: 48px;
}

.lk .popup-close-text {
  font-size: 12px;
  color: rgba(14, 17, 22, 0.5);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
}

@media screen and (min-width: 768px) {
  .lk .popup .close-mobile {
    display: none;
  }
}

Внутри .twig они все рядом, вот так:

<div class="popup-masterclass"></div>
<div class="popup-roundtable"></div>
<div class="popup-close-text close close-mobile">{{ t("lk.close.popup") }}</div>

И все это выглядит так: введите описание изображения здесь