HTML CSS で要素の中間にテーブルを配置する方法を教えていただきたいです。

Question

HTML、CSSに関しての初歩的な質問になってしまうのですが、添付のファイルをご確認をお願いします。
divが2行ありますが、そちらを1行ずつdivで囲っている状態です。
そこに行をまたいでテーブルを設置したいのですが、方法のイメージがわかず良い方法をご存知の方がいらっしゃればご教示いただけないでしょうか。
横並びは display: flex; で作成しています。
説明がわかりづらいかもしれませんが、ご回答いただけると幸いです。

Answer 1

こんな感じでしょうか？

Comments

[yambejp]

<style>
.wrap{
display:flex;
justify-content:space-between;
}
</style>
<div class="wrap">
<div>
<div>L1</div>
<div>L2</div>
</div>
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
<div>
<div>R1</div>
<div>R2</div>
</div>
</div>

[fukuma]

ご回答いただきありがとうございます。
こちらのコードでも再現できました。ありがとうございます。

Answer 2

横並び３つのdivを作成。
左のdivに、縦に並ぶdiv２つ入れる。
真ん中のdivにtable入れる。
右のdivに、縦に並ぶdiv２つ入れる。

Comments

[fukuma]

早速のご回答ありがとうございました。解決できました。