Thymeleaf(th:each)に適応した、子要素数によって可変なレイアウト

Question

こんにちは。
Spring Bootについて初学者なので拙いところもあると思いますが、よろしくお願いします。

実現したいこと

Thymeleafで以下のようなレイアウトを実現したいです。

説明すると、A,B共に共通項目でGroupingされたListになっていて、
リストごとに横に並べられ、その中にリストの中のデータが子要素として配置されています。（レイアウトの都合上、画像ではリストの中身は省略しています。）
データの数はリストによって異なるので、横の長さは揃えていますが高さがそれぞれ異なります。

現状はAのListを<th:each>で列挙してその後BのListを<th:each>で再び列挙するような書き方にしていますがそれだとうまく実現出来ないので、それ以外にどう書くか、またCSSでどのように再現すればいいかがわかりません。

###コード
再現は出来ていませんが、以前tableを使って書いていたときのhtmlを載せておきます。

<div class='text-nowrap'>
<table class="table table-bordered" >
            <tr>
            	<td valign="top" th:each="group: ${HogeMap}">
            		<th:block th:each="item: ${group.value}">
	            		<!-- 中略 -->
	            	</th:block>
            	</td>
            </tr>
            <tr>
            	<td valign="top" th:each="group: ${FugaMap}">
            		<th:block th:each="item: ${group.value}">
	            		<!--中略-->
	            	</th:block>
            	</td>
            </tr>
</table> 
</div>

この場合レイアウトが画像でいう一番データの多いAとBが基準となった升目になるため、データの少ないAやBの要素には大きな空白が存在していました。

以下、現在のソースとそのレイアウトです。

<div class='text-nowrap'>
<div class = "BlockPart" th:each="group: ${HogeMap}">
        		<th:block th:each="item: ${group.value}">
        			<!--中略-->
        		</th:block>
        	</div><br>
        	<div class = "BlockPart" th:each="group: ${FugaMap}">
        		<th:block th:each="item: ${group.value}">
            		<!--中略-->
            	</th:block>
        	</div>
</div>

.SSPart{
        display: inline-block;
        border-style: solid;
    }

上の画像の状態から隙間を無くしたい（上方向に詰めたい）です。

何か綺麗な書き方があれば教えてほしいです。よろしくお願いします。

補足情報

Eclipse 2020 Java FullEdition
AmazonCorretto jdk15.0.2_7
SpringBoot 2.4.3
MySQL 8.0.23
Windows10 Pro 20H2

Comments

[momotuwo]

現状だとほとんど丸投げ状態になってしまっているので
今時点でどのようなhtmlになっていて、どのようなListをサーバ上保持しているのか

理想の画面とどのように違うものが表示されているのかを記載しましょう。

[m.ts10806]

まず静的HTML（モック）作っては。
いきなり動的には作れませんよ。