Making images the same size

[jamesbrown03]

On my site I am programming I am trying to get the images to be the same height. You can see the a screenshot :

I would like the images to align the same height no matter the actual image size. my html for the the objects is as follows :

 <div class="articles">
            
           <div class="featured-articles">
               
               <img src="images/AI-circuit-board-tech-16.9.jpg" style="width: 100%" class="featured-images">
               
               <h2 class="Featured-article-title"><a class="author-title" href="kingsley.html">Do people Benifit from Technology</a></h2>
               <h3 class="author">By <a class="author-name" href="meettheteam.html">Kingsley Lao</a></h3>
           </div>

           <div class="featured-articles">
               
            <img src="images/CPU.jpg" style="width: 100%" class="featured-images">
            
            <h2 class="Featured-article-title"><a class="author-title" href="James-advice.html">PC Building Tips</a></h2>
            <h3 class="author">By <a class="author-name" href="meettheteam.html">James Brown</a></h3>
        </div>
        <div class="featured-articles">
               
            <img src="images/zoom.png" style="width: 100%" class="featured-images">
            
            <h2 class="Featured-article-title"><a class="author-title" href="James-advice.html">What's happening with tech?</a></h2>
            <h3 class="author">By <a class="author-name" href="meettheteam.html">Kingsley Lao</a></h3>
        </div>
        <div class="featured-articles">
               
            <img src="images/history.jpg" style="width: 100%" class="featured-images">
            
            <h2 class="Featured-article-title"><a class="author-title" href="article-quiz-james.html">History of Tech Quiz</a></h2>
            <h3 class="author">By <a class="author-name" href="meettheteam.html">James Brown</a></h3>
        </div>

My css is as follows :

.articles {
      text-align: center;
      padding: 10px 20px;
    }

    .featured-articles {
      /*background-color: white;
      position: center;
      box-sizing: border-box;
      float: left;
      width: 33.33%;
      padding: 5px;
      font-family: Balsamiq Sans;
      position: relative;
      text-align: center;
      color: black;
      text-align: left;
      size: 40px;
      margin-top: 20px;
      margin-bottom: 50px;*/
      width: 20%;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      
      display:inline-block;
    }

Thanks for the help

[Ray.H]

@jamesbrown03

I am trying to get the images to be the same height

It looks like your images are the same height.
It’s the wrapping text on your headings that is giving an unbalanced height.

Use flexbox and you can get equal heights on your featured-articles
Set the parent container, <div class="articles"> to display: flex and then style as you wish.

[jamesbrown03]

Thanks man that fixed it