DIV height problem (wrong height) in JQuery

Question

in some pages, I want to make two Divs the same height by JQuery. one div is sidebar and another is the content part. but there is a problem in my codes, I think. when there are some images in the page, the height will be wrong because of loading slowly and one div will be shorter than another.

my HTML codes:

<section>
    <div class="sidebar"></div>
    <div class="content"></div>
</section>

my JQuery codes:

jQuery(document).ready(function($) {

    $(".sidebar").height($(".content").height());

});

I even use the following codes but nothing happens:

jQuery( window ).load(function($) {

    $(".sidebar").height($(".content").height());

});

Answer:

as @Roko C. Buljan told me, I solved this by CSS. Thanks

Answer 1

Use CSS display: flex, and no more worries about loading assets, cached assets, page load listeners etc.

* {
  margin: 0;
  box-sizing: border-box;
}

.page {
  display: flex;
}

.sidebar {
  background: #0bf;
}

.content {
  background: #f0b;
  flex: 1;
}

<section class="page">       <!-- add a class -->
  <div class="sidebar">sidebar</div>
  <div class="content">
     <p>content and image...</p>
     <img src="//placehold.it/300x1000/fb0">
  </div>
</section>

Answer 2

I guess this is what you need but still I think CSS is a better solution.

$(document).ready(function() {
  let contentHeight = $('.content').height();

  $('.sidebar').height(contentHeight);
});