It can be done by using Math.max() by creating an array of heights of the elements.

Try the below code

function equalHeight () {
    const newsBlokken =  Array.from(document.querySelectorAll('#news .bottom'));
    const highest = Math.max(
        ...newsBlokken.map(item => item.getBoundingClientRect().height)
    );
    console.log(highest)
    return highest
}

You can use both CSS & JavaScript

CSS solution: use flexbox attributes.
According to W3 Documentation, you can have the same height of one element, in this case .bottom to fit their height.

.bottom{align-items: stretch; display: flex;}

<div class="bottom">
  <button type="button" style="min-height: 30px;">Try</button>
  <button type="button" style="min-height: 50px;">Flexbox</button>  
  <button type="button" style="min-height: 190px;">Instead</button>
</div>

JavaScript solution.
In this case you should check every .bottom elements height to set it too on others elements.

let buttons = document.querySelectorAll('.bottom');
let maxHeight = 0;
   
for (let i = 0; i < buttons.length; i++) {
    if (buttons[i].offsetHeight > maxHeight) {
        maxHeight = buttons[i].offsetHeight;
    }
}
    
for (let i = 0; i < buttons.length; i++) {
    buttons[i].style = "height: " + maxHeight + "px";
}

<div class="main">
  <button class="bottom" style="height: 30px">Try</button>
  <button class="bottom" style="height: 20px">JavaScript</button>
  <button class="bottom" style="height: 50px">Here</button>
</div>

Hope it works for you !!!

jQuery(document).ready(function() {
            equalheight('.box');
        });
        
        
        jQuery(window).resize(function() {
             equalheight('.box');
        });
        
        equalheight = function(container) {
            var currentTallest = 0
            , currentRowStart = 0
            , rowDivs = new Array()
            , $el
            , topPosition = 0;
            jQuery(container).each(function($) {
                $el = jQuery(this);
                jQuery($el).height('auto')
                topPostion = $el.offset().top;

                if (currentRowStart != topPostion) {
                    for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
                        rowDivs[currentDiv].height(currentTallest);
                    }
                    rowDivs.length = 0;
                    currentRowStart = topPostion;
                    currentTallest = $el.height();
                    rowDivs.push($el);
                } else {
                    rowDivs.push($el);
                    currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
                }
                    for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
                    rowDivs[currentDiv].height(currentTallest);
                }
            });
        }

* {box-sizing: border-box;}
        .box-container {display: flex; flex-wrap: wrap; max-width: 800px; }
        .box {width:30%; padding: 10px; margin: 0 1.5%; background: #ccc; padding: 15px;}
        .box h2 {margin: 0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-container">
        <div class="box">
            <h2>Lorem Ipsum is simply</h2>
        </div>
        <div class="box">
            <h2>Lorem Ipsum is simply dummy text of the printing</h2>
        </div>
        <div class="box">
            <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
        </div>
    </div>

I am trying to get the highest element from a group with the class .bottom and set them all to have a height of that value.

My code I have now:

   equalHeight(){
        const newsBlokken = document.querySelectorAll('#news .bottom');
        let highest = 0;
    
        newsBlokken.forEach(function(item) {
            console.log(item.getBoundingClientRect().height);
            const itemH = item.getBoundingClientRect().height;
            highest = items > highest ? itemH : highest;
        });
        console.log(highest);
    }

The weird thing is that if I console log item I get 150 3 times and if I log highest I also get 150 while one of the elements is definitely larger.

If I just console log newsBlokken outside of the loop and inspect the array I see that the last one has: offsetHeight: 195 while the first two have 150. How come it doesn’t get the 195? ClientHeight also has 195 for the last element.

What am I missing?

As you can see the elements are not the same height:

HTML:

<section id="news" class="wrapper pb-0">
   <div class="row">
      <div class="col-12 news-top" style="padding-bottom: 242px;">
         <div class="container-fluid">
            <div class="d-flex justify-content-lg-between justify-content-center">
               <h2 class="dark pb-4">Our latest news</h2>
               <a class="button d-none d-lg-inline-flex" href="#">
               <span>View more</span>
               <span class="icon-arrow-right"></span>
               </a>
            </div>
         </div>
      </div>
      <div class="col-12 news-content">
         <div class="container-fluid">
            <div class="swiper-container swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden" style="margin-top: -242px;">
               <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
                  <div class="swiper-slide swiper-slide-active" style="width: 443.333px; margin-right: 25px;">
                     <a class="" href="">
                        <div class="news">
                           <img src="img.jpg" alt="alt">
                           <div class="bottom">
                              <h3>Title</h3>
                              <span class="icon-arrow-right"></span>
                           </div>
                        </div>
                     </a>
                  </div>
                  <div class="swiper-slide swiper-slide-next" style="width: 443.333px; margin-right: 25px;">
                     <a class="" href="">
                        <div class="news">
                           <img src="img.jpg" alt="alt">
                           <div class="bottom">
                              <h3>Title</h3>
                              <span class="icon-arrow-right"></span>
                           </div>
                        </div>
                     </a>
                  </div>
                  <div class="swiper-slide" style="width: 443.333px; margin-right: 25px;">
                     <a class="" href="">
                        <div class="news">
                           <img src="img.jpg" alt="alt">
                           <div class="bottom">
                              <h3>Title</h3>
                              <span class="icon-arrow-right"></span>
                           </div>
                        </div>
                     </a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>