Como exibir todas as areas de uma determinada categoria?

Galera estou precisando muito de ajuda, é o seguinte eu quero exibir da seguinte forma:

Só que meu loop não tá exibindo assim, ele exibe desse jeito

A categoria Em Geral tem duas áreas, e não tá exibindo da forma que eu gostaria... como eu posso arrumar isso?

<?php
include("inc/header.php");
$sqlCategorias = mysqli_query($conexao, "SELECT nomeCategoria, nomeArea FROM area INNER JOIN categoria ON area.idCategoria = categoria.idCategoria");
$sqlWidgets = mysqli_query($conexao, "SELECT tituloWidget, conteudoWidget FROM widget");
?>

<div class="container">
 <section class="categorias col-md-9">

 <?php
 while($row = mysqli_fetch_array($sqlCategorias)):
 $nomeCategoria = $row['nomeCategoria'];
 $nomeArea = utf8_encode($row['nomeArea']);

 ?>
 <article>
 <h2><?php echo $nomeCategoria; ?></h2>
 <ul>
 <li><a href="#"><?php echo $nomeArea;?></a></li>
 </ul>
 </article>
 <?php
 endwhile;
 ?>
 </section>
 <aside class="widgets col-md-3">
 <?php
 while($row = mysqli_fetch_array($sqlWidgets)):
 $tituloWidget = utf8_encode($row['tituloWidget']);
 $conteudoWidget = utf8_encode($row['conteudoWidget']);

 ?>
 <div class="widget">
 <h2><?php echo $tituloWidget; ?></h2>
 <p><?php echo $conteudoWidget; ?></p>
 </div>
 <?php
 endwhile;
 ?>
 </aside>
</div>

<?php
include("inc/footer.php");
?>