flexで横並びにしたアコーディオンメニューの高さ調節

Question

前提・実現したいこと

クリックすると開閉する仕様のアコーディオンメニューをflexで横2列に配置しています。
アコーディオンを開くと、アコーディオンを設定していない要素まで一緒に高さが変わってしまうので、それを解消したいです。
下記コードの「タイトル01」の高さはそのままで、下にくる「タイトル03」をすぐ下に表示させたいです。

該当のソースコード

<ul id="g-nav">
	<li>タイトル01</li>
	<li>
		<div class="btn">タイトル02</div>
		<ul>
			<li>サブタイトル</li>
			<li>サブタイトル</li>
			<li>サブタイトル</li>
		</ul>
	</li>
	<li>タイトル03</li>
	<li>タイトル04</li>
</ul>

#g-nav {
	max-width: 900px;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
},
#g-nav div {
	display: block;
	padding: 20px 25px;
	font-size: 18px;
	font-weight: bold;
}
#g-nav li,
#g-nav div {
	width: 48.5%;
	display: block;
	background: #ccc;
}
#g-nav li {
	margin-bottom: 15px;
}
#g-nav li ul {
	display: none;
}

$(function () {
	$(".btn").on("click", function () {
		$(this).next().slideToggle();
		$('#g-nav li div').toggleClass('open');
	});
})

ご教示いただけますと幸いです。何卒宜しくお願い致します。

Comments

[yambejp]

2を開いたときに3の位置はさがらないということですか？

[rightbrain]

そうです。1のすぐ下に3を表示させたいです。

[yambejp]

それはもうflex処理ではないのでは？
absoluteなどで調整するとよいかと

[rightbrain]

横2列にできればflexではなくてもよいのですが、floatなど他の方法でもうまくいきません。
自動的にスペースを詰めることはできないということですね。ご回答ありがとうございます。

Answer 1

HTMLの方で、01と03、02と04を纏めるのが簡単そうです。
というかそれぐらいしか思いつかない。

<nav id="g-nav">
  <ul>
    <li>タイトル01</li>
    <li>タイトル03</li>
  </ul>

  <ul>
    <li>
      <div class="btn">タイトル02</div>
      <ul>
        <li>サブタイトル</li>
        <li>サブタイトル</li>
        <li>サブタイトル</li>
      </ul>
    </li>
    <li>タイトル04</li>
  </ul>
</nav>

#g-nav {
  max-width: 900px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
#g-nav > ul  {
  width: 48.5%;
}
#g-nav  li > div {
  display: block;
  padding: 20px 25px;
  font-size: 18px;
  font-weight: bold;
}
#g-nav ul li,
#g-nav ul div {
  display: block;
  background: #ccc;
}
#g-nav > ul > li {
  margin-bottom: 15px;
}
#g-nav li > ul {
  display: none;
}