Относительное положение делает div перекрыты

Question

Я создал шаблон содержимого с помощью ftl, который генерирует временную шкалу. Ниже вы увидите две временные шкалы. Мне пришлось использовать относительное положение, потому что я хочу, чтобы поле всегда было в одной и той же позиции. Одна временная шкала на странице работает хорошо, но когда я добавляю еще один элемент html, удаляю ее, у меня возникает проблема с перекрытием. Я попытался решить эту проблему с помощью givin min-height: 340px для h-timeline-container, но если пользователь добавляет длинный текст или большое изображение, проблема с перекрытием остается. Если я приведу минимальную высоту: авто это тоже не поможет.

https://www.w3schools.com/code/tryit.asp?filename=GCRGYZ1AD8M5

<div class="trij_ h-timeline-container">
<ol class="h-timeline-wrap">
    <li class="trij_ h-timeline-point" style="background-color: rgb(0, 39, 118); border-color: rgb(0, 39, 118);"><span class="point-text">
        1
    </span><span class="trij_ point-arrow-shade" style="display: block;">&nbsp;</span> <span class="trij_ point-arrow" style="display: block;">&nbsp;</span></li>
    <span class="trij_ point-details" style="display: block;"><div class="row">
<div class="col-sm-7">
    <h3>Headline 1</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
<div class="col-sm-5 my-2">
    <img class="h-timeline-img" alt="" data-fileentryid="586641705" src="/image/journal/article?img_id=587028236&amp;t=1583916613666&amp;fileName=hays_socialmedia-600.jpg">
    </div>
    </div>
    </span>
    <li class="trij_ h-timeline-point" style="background-color: rgb(0, 159, 218); border-color: rgb(0, 159, 218);"><span class="point-text">
        2
    </span><span class="trij_ point-arrow-shade" style="display: none;">&nbsp;</span> <span class="trij_ point-arrow" style="display: none;">&nbsp;</span></li>
    <span class="trij_ point-details" style="display: none;"><div class="row">
<div class="col-sm-12">
    <h3>Headline 2</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
    </div>
    </span>
    <li class="trij_ h-timeline-point" style="background-color: rgb(0, 159, 218); border-color: rgb(0, 159, 218);"><span class="point-text">
        3
    </span><span class="trij_ point-arrow-shade" style="display: none;">&nbsp;</span> <span class="trij_ point-arrow" style="display: none;">&nbsp;</span></li>
    <span class="trij_ point-details" style="display: none;"><div class="row">
<div class="col-sm-12">
    <h3>Headline 2</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br><br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
    </div>
    </span>


</ol>
</div>
<style type="text/css">

.h-timeline-icons{
    margin-left: -2px;
    font-size: 20px;
}
.h-timeline-container{
    min-height:340px;
     margin:30px 0;
}
.h-timeline-img{
    max-height:250px;
}
.h-wrapper{
    position:relative;
}
ol.h-timeline-wrap {
    position: relative;
    margin: 0;
    justify-content: space-around;
    display: flex;
    height: 3px;
    background: #eeeeee;
}

ol.h-timeline-wrap::before {
    left: -5px;
}
ol.h-timeline-wrap::after {
    right: -10px;
    border: 10px solid transparent;
    border-right: 0;
    border-left: 20px solid #9b2;
    border-radius: 3px;
}

/* ---- Timeline elements ---- */

li.h-timeline-point {
    position: relative;
    float: left;
    top: -16px;
    left: -15px;
    display: block;
    width: 40px;
    height: 40px;
    z-index: 0;
    font: bold 14px arial;
    border: 4px solid #009FDA;
    border-radius: 50%;
    background: #009FDA;
}
li.h-timeline-point:hover {
    background-color: #002776 !important;
    border-color: #002776 !important;
}


.point-text {
    right: -8.5px;
    z-index: 2;
    font-size: 25px;
    top: 1px;
    position: relative;
    font-weight: normal;
    color: white;
}

/* ---- Details ---- */

.trij_ .point-details {
    position: absolute;
    right: 4%;
    top: 53px;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid #002776;
    font-size: 16px;
    background: #fff;
    color: black;
    font-weight: normal;
    width: 90%;
    z-index:-1;
}


.h-timeline-point:hover{
  cursor: pointer;
}

.point-arrow {
    content: "";
    position: absolute;
    left: -4px;
    top: 40px;
    display: none;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 25px solid #002776;
}
.point-arrow-shade{
    display: block;
    top: 43px;
    border-bottom: 25px solid #ffffff;
    position: absolute;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    width: 0;
    height: 0;
    left: -4px;
    content: "";
    z-index: 2;
}



@media only screen and (max-width: 1200px) {


}
@media only screen and (max-width: 992px) {


}
@media only screen and (max-width: 500px) {
    .h-timeline-container {
     min-height: 540px;
    }

  .trij_ .point-details{
      right:2%;
      width:93%;
  }

}
@media only screen and (max-width: 450px) {
    .h-timeline-img{
      max-height:200px;
    }
}
</style>

<script>
$('li.trij_.h-timeline-point').on('click',function(){
  $('.trij_.point-details, .trij_.point-arrow, .trij_.point-arrow-shade').css('display', 'none');
  $('li.trij_.h-timeline-point').css('background-color', '#009FDA');
  $('li.trij_.h-timeline-point').css('border-color', '#009FDA');
  if ($(this).next().css('display') == 'none'){
     $(this).css('background-color', '#002776');
     $(this).css('border-color', '#002776');
     $(this).next().css('display', 'block');
     $(this).children().next().css('display', 'block');
     $(this).children().next().next().css('display', 'block');
  }
});
$('li.trij_.h-timeline-point').first().click();
</script>

<div class="rfgi_ h-timeline-container">
<ol class="h-timeline-wrap">
    <li class="rfgi_ h-timeline-point" style="background-color: rgb(0, 39, 118); border-color: rgb(0, 39, 118);"><span class="point-text">
        1
    </span><span class="rfgi_ point-arrow-shade" style="display: block;">&nbsp;</span> <span class="rfgi_ point-arrow" style="display: block;">&nbsp;</span></li>
    <span class="rfgi_ point-details" style="display: block;"><div class="row">
<div class="col-sm-12">
    <h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    </div>
    </span>
    <li class="rfgi_ h-timeline-point" style="background-color: rgb(0, 159, 218); border-color: rgb(0, 159, 218);"><span class="point-text">
        2
    </span><span class="rfgi_ point-arrow-shade" style="display: none;">&nbsp;</span> <span class="rfgi_ point-arrow" style="display: none;">&nbsp;</span></li>
    <span class="rfgi_ point-details" style="display: none;"><div class="row">
<div class="col-sm-12">
    <h3>Headline 2</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    </div>
    </span>


</ol>
</div>
<style type="text/css">

.h-timeline-icons{
    margin-left: -2px;
    font-size: 20px;
}
.h-timeline-container{
    min-height:340px;
     margin:30px 0;
}
.h-timeline-img{
    max-height:250px;
}
.h-wrapper{
    position:relative;
}
ol.h-timeline-wrap {
    position: relative;
    margin: 0;
    justify-content: space-around;
    display: flex;
    height: 3px;
    background: #eeeeee;
}

ol.h-timeline-wrap::before {
    left: -5px;
}
ol.h-timeline-wrap::after {
    right: -10px;
    border: 10px solid transparent;
    border-right: 0;
    border-left: 20px solid #9b2;
    border-radius: 3px;
}

/* ---- Timeline elements ---- */

li.h-timeline-point {
    position: relative;
    float: left;
    top: -16px;
    left: -15px;
    display: block;
    width: 40px;
    height: 40px;
    z-index: 0;
    font: bold 14px arial;
    border: 4px solid #009FDA;
    border-radius: 50%;
    background: #009FDA;
}
li.h-timeline-point:hover {
    background-color: #002776 !important;
    border-color: #002776 !important;
}


.point-text {
    right: -8.5px;
    z-index: 2;
    font-size: 25px;
    top: 1px;
    position: relative;
    font-weight: normal;
    color: white;
}

/* ---- Details ---- */

.rfgi_ .point-details {
    position: absolute;
    right: 4%;
    top: 53px;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid #002776;
    font-size: 16px;
    background: #fff;
    color: black;
    font-weight: normal;
    width: 90%;
    z-index:-1;
}


.h-timeline-point:hover{
  cursor: pointer;
}

.point-arrow {
    content: "";
    position: absolute;
    left: -4px;
    top: 40px;
    display: none;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 25px solid #002776;
}
.point-arrow-shade{
    display: block;
    top: 43px;
    border-bottom: 25px solid #ffffff;
    position: absolute;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    width: 0;
    height: 0;
    left: -4px;
    content: "";
    z-index: 2;
}



@media only screen and (max-width: 1200px) {


}
@media only screen and (max-width: 992px) {


}
@media only screen and (max-width: 500px) {
    .h-timeline-container {
     min-height: 540px;
    }

  .rfgi_ .point-details{
      right:2%;
      width:93%;
  }

}
@media only screen and (max-width: 450px) {
    .h-timeline-img{
      max-height:200px;
    }
}
</style>
<script>
$('li.rfgi_.h-timeline-point').on('click',function(){
  $('.rfgi_.point-details, .rfgi_.point-arrow, .rfgi_.point-arrow-shade').css('display', 'none');
  $('li.rfgi_.h-timeline-point').css('background-color', '#009FDA');
  $('li.rfgi_.h-timeline-point').css('border-color', '#009FDA');
  if ($(this).next().css('display') == 'none'){
     $(this).css('background-color', '#002776');
     $(this).css('border-color', '#002776');
     $(this).next().css('display', 'block');
     $(this).children().next().css('display', 'block');
     $(this).children().next().next().css('display', 'block');
  }
});
$('li.rfgi_.h-timeline-point').first().click();
</script>