Почему мой CSS / Layout меняется после запуска AJAX / JavaScript?

Question

При щелчке пользователя я запускаю AJAX-вызов для извлечения данных из стороннего API. Перед действием интерфейс / макет отображается правильно, но после того, как данные были извлечены и заполнены в интерфейсе, макет изменяется.

После нескольких отладок кажется, что унаследованное отношение меняется.

В чем может быть проблема / почему это так?

Это уязвимая часть HTML:

#mainContent .fourthRow .Goals {
  float: left;
  width: 20%;
  height: 280px;
  margin-right: 5px;
  background-color: #F2F8FF;
}

#mainContent .fourthRow .goalsColumn {
  background-color: #F2F8FF;
  display: inline-block;
  float: left;
  height: 100%;
  width: 24.3%;
  text-align: center;
  border-right: 1px solid;
  margin-right: 1px;
  border-color: #DADADA;
  font-family: 'Muli', sans-serif;
  font-weight: bold;
  font-size: 15px;
}

#mainContent .fourthRow .goalsColumn p {
  height: 40px;
  border-bottom: 1px solid;
  border-color: #DADADA;
  font-family: 'Muli', sans-serif;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

<div class="fourthRow">
    <div class="Goals">
      <div class="goalsColumn">
        <div id="divGoal"><img id="goal" src="{% static "images/goal.png" %}" alt="soccergoal"></div>
        <div><p>Scored Goals</p></div>
        <div><p>SGPM</p></div>
        <div><p>Conceded Goals</p></div>
        <div><p>CGPM</p></div>
        <div><p>Goals Total</p></div>
        <div><p>GTPM</p></div>
      </div>
      <div class="goalsColumn">
        <div><p>Home</p></div>
        <div id="goals_home_for" "goals_style"><p></p></div>
        <div id="goalsAvg_home_for"><p></p></div>
        <div id="goals_home_against"><p></p></div>
        <div id="goalsAvg_home_against"><p></p></div>
        <div id="goals_total_home"><p></p></div>
        <div id="goalsAvg_home_total"><p></p></div>
      </div>
      <div class="goalsColumn">
        <div><p>Away</p></div>
        <div id="goals_away_for"><p></p></div>
        <div id="goalsAvg_away_for"><p></p></div>
        <div id="goals_away_against"><p></p></div>
        <div id="goalsAvg_away_against"><p></p></div>
        <div id="goals_total_away"><p></p></div>
        <div id="goalsAvg_away_total"><p></p></div>
      </div>
      <div class="goalsColumn">
        <div><p>Total</p></div>
        <div id="goals_total_for2"><p></p></div>
        <div id="goalsAvg_total_for"><p></p></div>
        <div id="goals_total_against"><p></p></div>
        <div id="goalsAvg_total_against"><p></p></div>
        <div id="goals_total"><p></p></div>
        <div id="goalsAvg_total"><p></p></div>
      </div>
    </div>

Исправить перед запуском JS / AJAX:

Запутано после запуска JS / AJAX:

Answer 1

Перед запросом ajax div#goals_home_for содержит тег p. А стиль тега p имеет height: 40px, поэтому div#goals_home_for имеет высоту 40px. Но после запроса ajax ваш javascript может редактировать DOM из данных json ответа, и div#goals_home_for теряет свой дочерний тег p. И это также теряет свою высоту. Короче говоря, попробуйте:

#mainContent .fourthRow #goals_home_for {
   height: 40px;
   <!-- Rest is omitted -->
}

или отредактируйте свой javascript так, чтобы он обернул p теги вокруг каждой информации.