CSS styling of divs

Question

I'm having a problem with autogenerated divs from a database, I'm trying to show news that are stored in my database, I set the width in order to have 2 news per row, and different heights according to content. But now I have a big white space with two news in the same vertical row. How do I solve this.

Here is the image that shows my problem:

Here is my html code for each new:

<?php

      while($row = mysqli_fetch_array($resultNoticias)){
        echo '<div class="noticia">';     
        echo '<h4>Noticias/' . $row["Fecha"] . '</h4>';
        echo '<a href="new.php?id='.$row["idNoticias"] . '"><h3>' . utf8_encode($row["Titulo"]) . '</h3></a>';
        echo '<p>'. utf8_encode($row["Descripcion"]) . '</p>';
         echo '<a href="new.php?id='.$row["idNoticias"]. '"> <img style="height:100%;width:100%;" src=images/' .  $row["Imagen1"] . '></a><br>';
       echo '<br><br>';
        echo '</div>';
      }
    ?>

And here is the css:

.noticia{
    width: 48%;
    position: relative;
    float: left;
    display: inline-block;
    padding-left: 2%;
    padding-right: 2%;
    text-align: left;
    padding-top: 10px;
    word-wrap: break-word;
    font-size: 1.5em;
    background-color:white;
    border:2px solid black;
    margin-left:1%;
    background-color: #DADADA;
}

Answer 1

Please add minimum height in your css.

.noticia{
    width: 48%;
    min-height:300px;
    position: relative;
    float: left;
    display: inline-block;
    padding-left: 2%;
    padding-right: 2%;
    text-align: left;
    padding-top: 10px;
    word-wrap: break-word;
    font-size: 1.5em;
    background-color:white;
    border:2px solid black;
    margin-left:1%;
    background-color: #DADADA;
}