Элемент продолжает двигаться, когда пользователь создает новый обзор в CSS

Question

Я создаю веб-сайт в формате html & css через Django. Но у меня есть некоторые трудности. Вот мой код для ошибочного элемента кода:

detail.html

<div class="contact-info" style="float: right!important; position: sticky!important; margin-right: 25px!important; margin-left: 750px!important; width: 30%!important; height: 50px!important; padding-bottom: 195px!important; margin-top: -2200px!important;">

  <div class="elements" style=" margin-bottom: 200px!important; padding-bottom: 20px!important;">

    <div class="address">
        <span class="icon-map-marker"></span>
        <p> <a style="color:grey!important; border:none!important;" href="{{restraunt.address_link}}">{{restraunt.address}}</a></p>
    </div>
    <div class="address" >
        <span class="icon-mobile-phone"></span>
        <p style="color: grey!important; border: none!important;"><a style="color:grey!important; border: none!important;" href="tel:{{restraunt.phone}}" style="color: grey!important;">+{{restraunt.phone|phonenumber}}</a> </p>
    </div>
    <div class="address">
        <span class="icon-link"></span>
        <p><a style="color:grey!important; border: none!important;" href="{{restraunt.website}}">{{restraunt.website}}</a></p>
    </div>
    <div class="address">
        <span style="" class="icon-time"></span>
        <p>Mon - Sun, {{restraunt.opening_hour}} - {{restraunt.closing_hour}} <br>
    </div>
      </div>
</div>

Код работает нормально, пока я не введу новый отзыв. Затем элемент прыгает вниз и продолжает прыгать по мере добавления нового обзора. Я не знаю, как это исправить, поскольку я пытался postion: relative, postition: absolute и position: sticky, но все, похоже, не удалось. Я сделаю несколько скриншотов, чтобы объяснить это лучше.

До нового обзора:

После нового обзора:

Я давно не могу решить эту проблему. Я был бы очень признателен за любую помощь. Спасибо