wordpress　Contactform7のfree_textに当たる部分のみ改行させたい

前提・実現したいこと

wordpress「Contactform7」を使用しております。
フォームのチェックボックスやラジオボタンの項目にfree_textを設定し
「その他」を選択した際に文字が記入されるようにしているのですが
希望のレイアウトになりません。

希望のレイアウトとしては、その他以外の項目は横並びにし
「その他」のみ改行されるようにしたいのですが可能なのでしょうか？

発生している問題・エラーメッセージ

基本的には項目は横並び表示にしたいので
class「span.wpcf7-list-item」に「display: inline-block;」を設定しています
ですが、そうすると最後の「その他」の表示がおかしくなってしまいます

「display: block ruby;」にすると「その他」は良い感じなのですが、
その他以外の項目が縦並びになります

希望としては下図の様に、「その他」以外の項目は横並びのままで
「その他」のみ改行されるようにしたいです

※Firefoxでは「display: ruby;」にすると上図のようになったのですが
他のブラウザでは全て縦並びになってしまいました
※こちらはイメージ編集ソフトで加工したものです
※あわよくば「その他」の記入枠の幅を送信ボタンの幅に合わせたいです

補足情報（FW/ツールのバージョンなど）

wpcf7-form-control-wrap には position: relative; が記述されています

以下にフォームの箇所のみを追記しましたがjsなどは不要でしょうか？


<p><label>好きなお寿司のネタ<br />
<span class="wpcf7-form-control-wrap osushi"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item first"><label><input type="checkbox" name="osushi[]" value="うに" /><span class="wpcf7-list-item-label">うに</span></label></span>
<span class="wpcf7-list-item"><label><input type="checkbox" name="osushi[]" value="いくら" /><span class="wpcf7-list-item-label">いくら</span></label></span>
<span class="wpcf7-list-item last has-free-text"><label><input type="checkbox" name="osushi[]" value="その他" /><span class="wpcf7-list-item-label">その他</span></label> 
<input type="text" name="_wpcf7_checkbox_free_text_osushi" class="wpcf7-free-text" /></span></span></span></label>
</p>

kei344

2020/08/19 04:01

表示されている部分の出力されたHTML（ブラウザで「ページのソースを表示」）を質問文に追記ください。

Diglett_050

2020/08/19 04:24

不要箇所が多いかもしれませんが、ひとまず全て貼り付けています。

kei344

2020/08/19 04:27

（質問文は編集できます）この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、フォームの箇所のみを質問文にコードブロックで追記してください。コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Diglett_050

2020/08/19 05:04

ややこしく見えるので、一旦先程のコメントに対して削除依頼を出しておきます

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

回答1件

ベストアンサー

まずフォームのHTMLの親子関係がおかしいです。
下記のような感じの出力になるように、Contactform7 のテンプレートを修正してください。

html
1<span class="wpcf7-form-control-wrap osushi">
2  <p>好きなお寿司のネタ</p>
3  <span class="wpcf7-form-control wpcf7-checkbox">
4    <span class="wpcf7-list-item first">
5      <label>
6        <input type="checkbox" name="osushi[]" value="うに" />
7        <span class="wpcf7-list-item-label">うに</span>
8      </label>
9    </span>
10    <span class="wpcf7-list-item">
11      <label>
12        <input type="checkbox" name="osushi[]" value="いくら" />
13        <span class="wpcf7-list-item-label">いくら</span>
14      </label>
15    </span>
16    <span class="wpcf7-list-item last has-free-text">
17      <label>
18        <input type="checkbox" name="osushi[]" value="その他" />
19        <span class="wpcf7-list-item-label">その他</span>
20      </label>
21      <input type="text" name="_wpcf7_checkbox_free_text_osushi" class="wpcf7-free-text" />
22    </span>
23  </span>
24</span>

それができたら、追加CSSに下記のCSSを追加してください。

css
1.wpcf7-form-control-wrap br {
2    display: none;
3  }
4
5.wpcf7-list-item.last {
6	display: flex;
7}
8
9.wpcf7-list-item.last > label {
10	flex-shrink: 0;
11	margin-right: 10px;
12}