У меня есть несколько неупорядоченных списков (UL) элементов. Пожалуйста, проверьте изображение ниже:

то, что я хочу сделать, это плавать UL рядом друг с другом. UL имеют различную длину содержимого (LI), поэтому некоторые UL длиннее других. Когда я плаваю UL рядом друг с другом в слое div ограниченной ширины, в какой-то момент последние UL плавают внизу / слева. Однако ... если есть UL, который длиннее, будет немного места. Я желаю ULs плавать влево истек друг к другу, в нижней части каждого элемента UL, без пробелов. Есть ли способ достичь этого с помощью HTML / CSS?

плавающие UL слева друг от друга легко ... но я не знаю, как избавиться от разницы

----- ОБНОВИТЬ ----

это код, который я использую для генерации HTML ... фактически я изменил его с UL на TABLE, но это не меняет мою проблему. У меня есть несколько таблиц, которые могут варьироваться от 1 до 8. Ширина контейнера DIV, где будут появляться эти таблицы, может содержать до 4 столбцов. ТАБЛИЦЫ будут иметь различное количество строк, поэтому будут различаться по длине.

$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>';
}