Tengo múltiples elementos de listas desordenadas (UL). Por favor revise la imagen a continuación:

lo que quiero hacer es flotar los UL uno al lado del otro. Las UL tienen diferentes longitudes de contenido (LI), por lo tanto, algunas UL son más largas que otras. Cuando floto ULs uno al lado del otro en una capa div de ancho limitado, en algún momento las últimas UL flotan en la parte inferior / izquierda. Sin embargo ... si hay un UL que es más largo, habrá algo de espacio. Deseo que las UL floten a la izquierda y aapila entre sí, en la parte inferior de cada elemento UL, sin espacios. ¿Hay alguna manera de lograr esto con HTML / CSS?

Las UL flotantes que quedan una de la otra es fácil ... pero no sé cómo deshacerme del margen

----- ACTUALIZACIÓN ----

este es el código que uso para generar el HTML ... en realidad lo cambié de UL a TABLE pero no cambia mi problema. Tengo varias TABLAS que pueden variar de 1 a 8. El ancho del contenedor DIV donde aparecerán estas tablas puede alojar hasta 4 columnas. Las TABLAS tendrán diferentes cantidades de FILAS, por lo tanto, diferirán en longitudes.

$groups = array();
foreach ($related->posts as $post) {
    $groups[$post->post_type][] = $post;
}
foreach ($groups as $name => $posts) {
    printf('<table class="related-group related-%s "><tbody>', htmlspecialchars($name));
    foreach ($posts as $post) {
        printf('<tr class="related-item"><td><a href="'.get_permalink($post->ID).'" rel="permalink">'.get_the_post_thumbnail($post->id, '32').'</a></td><td><a href="'.get_permalink($post->ID).'" rel="permalink">'.$post->post_title.'</a></td></tr>');
    }
echo '</tbody></table>';
}