jQuery не обновляет / перерисовывает вид

Question

У меня есть оболочка DIV, которая содержит два других DIV, которые определены с помощью CSS, чтобы плавать вправо и плавать влево. Эти два DIV я хочу установить на одинаковую высоту в зависимости от большего из обоих. Я пробовал это с помощью следующего кода:

var pHeightA;
var pHeightB;
var output = '';

$('.anklickbareartikel-wrapper').each(function(i) {

  pHeightA = $('.anklickbareartikel', this).height();
  pHeightB = $('.anklickartikelbox', this).height();

  output = i + ': ';

  if (pHeightA > pHeightB) {
    $('.anklickartikelbox', this).height(pHeightA);
    output += 'pHeightA > pHeightB |';
  }

  if (pHeightB > pHeightA) {
    $('.anklickbareartikel', this).height(pHeightB);
    output += 'pHeightB > pHeightA |';
  }

  //alert( output + 'Original: A ' + pHeightA + ' / B ' + pHeightB + ' // Nach Änderung: A ' + $('.anklickbareartikel', this).height() + ' / ' + $('.anklickartikelbox', this).height() );

});

.anklickbareartikel-wrapper {
  height: auto;
}

.anklickbareartikel {
  position: relative;
  width: 50%;
  height: auto;
  background: #fffdfb;
  background-size: cover;
  background-position: center center;
}

.anklickartikelbox {
  width: 50%;
  height: auto;
  padding: 50px 90px;
}

.anklickartikelbox img {
  width: 100%;
  max-width: 450px;
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row anklickbareartikel-wrapper">
  <div class="col-xs-12 col-sm-12 col-md-6 col-md-push-6 anklickbareartikel" style="background-image: url('image_a.jpg');">

    <div class="artikelklicker" rel="" style="top:65%;left:50%;">
      <img src="icon.png" border="0">
    </div>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-6 col-md-pull-6 anklickartikelbox">
    <div class="anklickartikelfakten">
      <img src="image_b.jpg" border="0">
      <h1>Headline</h1>
      <p>Lorem ipsum</p>
      <a href="page_x.html" target="_blank">» Linktext X</a>
      <a href="page_y.html">» Linktext Y</a>
    </div>
  </div>
</div>

(Плавающее значение задается bootstrap CSS)

Но это, к сожалению, не работает. Забавно, что если я активирую закомментированную команду оповещения, перерисовка для соответствующего элемента работает, как и ожидалось, после каждого подтверждения окна оповещения.

Что я сделал не так? Заранее благодарю за любую помощь!!