flexを使っても横並びにならない

questionクラスと同様にanswerクラスのspanとpタグを横並びに設定したくて
flexを使って上手く横並びにしようとトライしてみたのですが
なかなかうまくいきません。

jQueryが関係しているのか
原因が何なのか知りたいです。
コードは下の通りです。⇓

html
1  <!-- Q & A -->
2  <div class="outer">
3    <h1 class="title">Q & A</h1>
4    <div class="qa-inner">
5      <ul class="qa-list">
6        <li class="qa-item">
7          <h3 class="question"><span>Q</span>クリックするとどうなりますか？</h3>
8          <span class="pulse">+</span>
9          <div class="answer">
10            <span>A</span>
11            <p>aaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaaa
12              aaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaaaa
13              aaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaa
14              aaaaaaaaaaa aaaaaaaaaaa aaaaaa aaaaaaaaaaa
15            </p>
16          </div>
17        </li>
18        <li class="qa-item">
19          <h3 class="question"><span>Q</span>クリックするとどうなりますか？</h3>
20          <span class="pulse">+</span>
21          <div class="answer">
22            <span>A</span>
23            <p>aaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaaa
24              aaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaaaa
25              aaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaa
26              aaaaaaaaaaa aaaaaaaaaaa aaaaaa aaaaaaaaaaa
27            </p>
28          </div>
29        </li>
30        <li class="qa-item">
31          <h3 class="question"><span>Q</span>クリックするとどうなりますか？</h3>
32          <span class="pulse">+</span>
33          <div class="answer">
34            <span>A</span>
35            <p>aaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaaa
36              aaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaaaa
37              aaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaa
38              aaaaaaaaaaa aaaaaaaaaaa aaaaaa aaaaaaaaaaa
39            </p>
40          </div>
41        </li>
42        <li class="qa-item">
43          <h3 class="question"><span>Q</span>クリックするとどうなりますか？</h3>
44          <span class="pulse">+</span>
45          <div class="answer">
46            <span>A</span>
47            <p>aaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaaa
48              aaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaaaa
49              aaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaa
50              aaaaaaaaaaa aaaaaaaaaaa aaaaaa aaaaaaaaaaa
51            </p>
52          </div>
53        </li>
54      </ul>
55    </div>
56  </div>
57

scss
1// Q & A
2.qa-inner {
3  padding: 0 100px;
4  .qa-list {
5    display: flex;
6    flex-direction: column;
7    align-items: center;
8    .qa-item {
9      position: relative;
10      padding-left: 0;
11      margin-bottom: 30px;
12      width: 100%;
13      cursor: pointer;
14      &:last-of-type {
15        margin-bottom: 0;
16      }
17      .question {
18        margin: 0;
19        background-color: blue;
20        color: #fff;
21        font-size: 1.6rem;
22        font-weight: normal;
23        padding: 20px;
24        border: 1px solid #000;
25        span {
26          padding-right: 20px;
27          font-size: 1.9rem;
28        }
29      }
30      .pulse {
31        color: white;
32        font-size: 3rem;
33        font-weight: bold;
34        position: absolute;
35        top: 13px;
36        right: 15px;
37      }
38      .answer {
39        display: flex;
40        flex-direction: row;
41        background-color: #fff;
42        border: 1px solid #000;
43        border-top: none;
44        padding: 20px 18px;
45        font-size: 1.6rem;
46        display: none;
47        span {
48          color: blue;
49          margin-right: 20px;
50        }
51      }
52    }
53  }
54}
55

jQuery
1// Q & A
2$(function() {
3  $('.qa-item').click(function() {
4    var $answer = $(this).find('.answer');
5    if ($answer.hasClass('open')) {
6      $answer.removeClass('open');
7      $answer.slideUp();
8      $(this).find('.pulse').text('+');
9    } else {
10      $answer.addClass('open');
11      $answer.slideDown();
12      $(this).find('.pulse').text('-');
13    }
14  });
15});

どなたかご回答いただければ幸いです。

行動規範の内容に同意します

回答2件

ベストアンサー

jQuery の slideUp slideDown は、HTMLのインラインスタイルに display: block; と display: none; を付加して表示/非表示を切り替えていますので、CSSに設定したflex は無視されますね。

ここはflex以外の方法で横並びにするのがいいでしょう。
例えば、float: left; を使うと、

scss
1      .answer {
2        background-color: #fff;
3        border: 1px solid #000;
4        border-top: none;
5        padding: 20px 18px;
6        font-size: 1.6rem;
7        display: none;        
8        span {
9          color: blue;
10          margin-right: 20px;
11          float: left;
12        }
13        p {
14          margin-left: 40px;
15          margin-top: 5px;
16        }
17      }