フレックスボックスのアコーディオンの開閉がうまくいかない（html/CSS/JavaScript）

実現したいこと

フレックスボックスで2×２でコンテンツを並べ、
2段目は開閉式にしたいです。

発生している問題・分からないこと

閉じているときはうまくいきましたが、
2段目を開くとレイアウトが崩れてしまいます。
また、開いた時に、黄緑色の枠線を伸ばす方法が分かりません。

該当のソースコード

html

1 <section id="method">2 <div class="maincontent">3 <h2 class="pc"><img src="images/method-ttl.png" alt="その借金の悩み、司法書士にお任せください！"></h2>4 <h3>電話・メールでご相談いただければ、<br>5 <span class="red">あなたに合った方法を無料で診断</span>いたします。<br>相談は何度でも無料、通話料0円です。 6 </h3>7 8 <div class="method-list">9 <div class="method-item">10 <div class="sub-ttl">払い過ぎた利息を取り戻す</div>11 <h4>「過払い金請求」</h4>12 <p><span class="green">過払い金請求</span>とは、金融業者に払い過ぎた利息を取り戻すことです。 13 </p>14 <div class="recommend">15 <h5>＼こんな方にぴったりです／</h5>16 <ul>17 <li>すでに完済したが、 18 <br>　 法外な利息を払っていた時期がある 19 </li>20 <li>現在の借金に、違法な利率の 21 <br>　 利息がついている 22 </li>23 <li>過払い金がどれくらいあるのか 24 <br>　 知りたい 25 </li>26 </ul>27 </div>28 </div>29 <div class="method-item">30 <div class="sub-ttl">今後の利息を減らす</div>31 <h4>「任意整理」</h4>32 <p><span class="green">任意整理</span>とは、現在の借金を正常な金利で計算し直し、毎月の利息を減額する手続きです。 33 </p>34 <div class="recommend">35 <h5>＼こんな方にぴったりです／</h5>36 <ul>37 <li>自己破産するほど深刻ではないが、<br>38 　 現在の借金を減らしたい 39 </li>40 <li>車や自宅など、<br>41 　 大事な資産を残したい 42 </li>43 <li> 家族や職場には秘密にしておきたい 44 </li>45 </ul>46 </div>47 </div>48 <div class="method-ttl js-title">49 <div class="sub-ttl">資産を残しつつ、借金を大幅カットする</div>50 <h4>「個人再生」</h4>51 <img src="images/method-down.png" alt="" class="arrow">52 </div>53 <div class="method-box">54 <p><span class="green">個人再生</span>とは、自宅や車などの資産を残しながら、大幅に借金を減額する手続きです。 55 </p>56 <div class="recommend">57 <h5>＼こんな方にぴったりです／</h5>58 <ul>59 <li>なんとか車やマイホームなどの<br>60 　資産を残したい 61 </li>62 <li>利息カットだけでは返済の目途が 63 <br>　立たない 64 </li>65 </ul>66 </div>67 </div>68 69 70 <div class="method-ttl js-title">71 <div class="sub-ttl">借金の返済額をゼロにする</div>72 <h4>「自己破産」</h4>73 <img src="images/method-down.png" alt="" class="arrow">74 </div>75 <div class="method-box">76 <p><span class="green">自己破産</span>とは、裁判所に破産を申し立て、すべての借金を0円にする手続きです。<span class="small">※一部例外あり</span>77 </p>78 <div class="recommend">79 <h5>＼こんな方にぴったりです／</h5>80 <ul>81 <li>借金をゼロにして、<br>82 　新しい生活をスタートさせたい 83 </li>84 <li>借金総額が大きくなり過ぎて、<br>85 　支払い不能になっている 86 </li>87 <li>毎日の取り立てが激しくて、<br>88 　精神的に苦しい 89 </li>90 </ul>91 </div>92 </div>93 </div>94 </div>95 </section>

CSS

1#method {2 background: url(../images/method-bg01.png);3 background-position: center top;4 background-repeat: no-repeat;5 background-size: 120%;6 z-index: 1;7}8 9#method h3 {10 margin: 10px 0 40px;11}12 13/*4つのコンテンツ*/14#method .method-list {15 display: flex;16 flex-wrap: wrap;17 width: calc(100% + 10px);18 justify-content: space-between;19}20 21#method .sub-ttl {22 font-size: 24px;23 color: #fff;24 background-color: #9dcb3c;25 text-shadow: 1px 1px #000;26 text-align: center;27 padding: 10px 0;28}29 30/*「過払金請求」「任意整理」*/31#method .method-item {32 width: calc(50% - 10px);33 margin-bottom: 30px;34 background-color: #fff;35 outline: 2px solid #9dcb3c;36 outline-offset: -2px;37 border-radius: 15px;38 padding-bottom: 20px;39}40 41 42/*「個人再生」「自己破産」*/43#method .method-ttl {44 width: calc(50% - 10px);45 margin-bottom: 30px;46 background-color: #fff;47 outline: 2px solid #9dcb3c;48 outline-offset: -2px;49 border-radius: 15px;50}51 52/*アコーディオンで現れるエリア*/53#method .method-box {54 display: none;/*はじめは非表示*/55}56 57#method .method-ttl .arrow {58 display: block;59 margin: 0 auto;60}61 62#method .method-ttl .arrow .open{63 transform: rotate(-180deg);64}65 66 67 68/*共通*/69#method h4 {70 font-size: 37px;71 font-weight: 900;72 text-align: center;73 margin: 15px 0 10px;74}75 76#method p {77 font-size: 20px;78 padding: 10px 45px 10px;79}80 81#method .recommend h5 {82 background-color: #ff7856;83 color: #fff;84 margin: 0 45px;85 padding: 5px 0px;86 text-align: center;87}88 89#method .recommend ul {90 font-size: 18px;91 margin: 0 45px;92 padding: 15px 15px 10px;93 background-color: #ffeee4;94}95 96#method .recommend ul li:before {97 display: inline-block;98 font-family: "Font Awesome 5 Free";99 content: '\f058';100 font-weight: 900;101 color: #ff7856;102 padding-right: 3px;103}104 105#method .recommend ul li {106 margin-bottom: 10px;107 line-height: 1.3em;108}

JavaScript

1$(function () {2 $(".js-title").on("click", function() {3 $(this).next().slideToggle(200);4 $(this).toggleClass("open",200);5 });6 });

試したこと・調べたこと

上記の詳細・結果

フレックスボックスのアコーディオン開閉の情報がほとんど見つけられず、試行錯誤して今の状態です。

補足

特になし