I have 3 articles in a row and the third article it's greater than other two

<html>
<head>
    <title>Best News Ever</title>
    <meta charset="UTF-8">
    <meta name="discription" content="This page is a website to learn HTML">
    <meta name="keywords" content="hmtl5,udemy,learn code">

    <meta name="author" content="Kostas Boukas">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css" />

</head>

<body>

    <header id="main-header">
         <h1 id="site-title">Best News Ever!</h1>
       </header>

       <section id="top-stories">
         <article>
           <div class="article-image" style="background:url(srf.jpg)"> </div>
           <h3 class="h">Surfing all day</h3>
           <p>All you need about surfing<a href="#" class="more-link">Read more</a></p>
         </article>
         <article>
             <div class="article-image" style="background:url(srf1.jpg)"> </div>
             <h3 class="h">Surfing is actually good for you</h3>
             <p>All you need about surfing<a href="#" class="more-link">Read more</a></p>
           </article>

           <article >
             <div class="article-image" id="kapout" style="background:url(srf2.jpg)"></div>
             <h3 class="h">Learn surfing for you</h3>
             <p>All you need about surfing<a href="#" class="more-link bolded-link">Read more</a></p>
           </article>
         </section>
    </body>
    </html>

I have 3 articles in a row and the third article is greater than other two. How can I fix this problem? I want to have the same size.

Solution

A flex layout is a good option.

In the snippet bellow the articles are displayed in the same row. They have the same width and height.

I have added padding and border so you can see the articles boundaries.

#top-stories{
  display: flex;
  flex-flow: row nowrap;
}
article {
  flex: 1;
  padding: 5px;
  border: 1px solid gray;
}

<header id="main-header">
  <h1 id="site-title">Best News Ever!</h1>
</header>

<section id="top-stories">
  <article>
    <div class="article-image" style="background:url(srf.jpg)"> </div>
    <h3 class="h">Surfing all day</h3>
    <p>All you need about surfing<a href="#" class="more-link">Read more</a></p>
  </article>
  <article>
    <div class="article-image" style="background:url(srf1.jpg)"> </div>
    <h3 class="h">Surfing is actually good for you</h3>
    <p>All you need about surfing<a href="#" class="more-link">Read more</a></p>
  </article>

  <article>
    <div class="article-image" id="kapout" style="background:url(srf2.jpg)"></div>
    <h3 class="h">Learn surfing for you</h3>
    <p>All you need about surfing you need about surfingyou need about surfingyou need about surfingyou need about surfingyou need about surfing<a href="#" class="more-link bolded-link">Read more</a></p>
  </article>
</section>