如何防止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>

所有这些看起来像这样：