tableの隣にグラフを表示したい

Question

前提・実現したいこと

Thymeleafで作成した画面にテーブルとグラフ(Chart.jsで作成したもの)を表示しているのですが、
テーブルの隣にグラフを同じくらいのサイズで表示したいのですが、
下のイメージのように下にずれて小さく表示されてしまいます。
ご教授いただければと思います。

↓現在の状況

↓完成イメージ

該当のソースコード

<div th:each="obj2 : ${shopInfoList}">
		<div class="alt-table-responsive">
			<table class="table table-striped">
				<thead><tr><th colspan="2">テスト</th></tr></thead>
				<tbody>
					<tr>
						<td th:text="テスト"></td>
						<td th:text="テスト"></td>
					</tr>
					<tr>
						<td th:text="テスト"></td>
						<td th:text="テスト"></td>
					</tr>
					<tr>
						<td th:text="テスト"></td>
						<td th:text="テスト"></td>
					</tr>
					<tr>
						<td th:text="テスト"></td>
						<td th:text="テスト"></td>
					</tr>
					<tr>
						<td th:text="テスト"></td>
						<td th:text="テスト"></td>
					</tr>
					<tr>
						<td th:text="テスト"></td>
						<td th:text="テスト"></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="chart-graph">
			<canvas th:id=${obj2.pastChartId}></canvas>
			<script type="text/javascript" th:inline="javascript">
		    /*<![CDATA[*/
		    var ctx = document.getElementById(/*[[ ${obj2.pastChartId} ]]*/).getContext('2d');
		    var ChartDemo = new Chart(ctx, {
		        type: 'line',
		        data: {
		            labels: /*[[ ${obj2.createDate} ]]*/,
		            datasets: [
		                {
		                    label: "テスト",
		                    borderColor: '#FF0000',
		                    lineTension: 0,
		                    fill: false,
		                    data: /*[[ ${obj2.womanPastNm} ]]*/,
		                },
		                {
		                    label: "テスト",
		                    borderColor: '#0000FF',
		                    lineTension: 0,
		                    fill: false,
		                    data: /*[[ ${obj2.manPastNm} ]]*/,
		                },
		            ]
		        },
		        options: {
		            responsive: true,
		        }
		    });
		    /*]]>*/
		    </script>
		</div>
	</div>

@charset "UTF-8";
table {
width: 20%;
height: 50px;
border: 2px #2b2b2b solid;
}

td, th {
border: 1px #2b2b2b solid;
}

.alt-table-responsive {
    width: 20%;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
}

.chart-graph{
	float: right;
}

Answer 1

flexが利用可能であれば、次のようにCSSを指定すれば可能です。

.chart-graph{
	height:30vh;
	width: 40vw;
}

.box {
	display: flex;
}

<div class="container">
	<div th:each="obj2 : ${shopInfoList}" class="box">
		<div class="alt-table-responsive">
			<table class="table table-striped">
....
			</table>
		</div>
		<div class="chart-graph">
			<canvas th:id=${obj2.pastChartId}></canvas>
....

適宜、.alt-table-responsiveやtableでのサイズ指定を調整してください。

Comments

[takahiro00]

ご回答ありがとうございます。
shopInfoListの要素数だけ<table>が出力されるのは問題ないのですが、
<canvas th:id=${obj2.pastChartId}></canvas>をテーブルの横(右側)に表示したいのです。
今だとテーブルの右下に表示されてしまうので、

すみません説明が分かりづらかったと思うので、完成イメージを追加いたしました。

[A-pZ]

なるほどありがとうございます。回答を訂正しますのでお待ちください。

[takahiro00]

ありがとうございます！
無事できました！