Wordpressコンタクトフォーム7でテキストフォームを横並び

Contact Form 7（コンタクトフォーム７）で、名前を姓名の順で入力する場合、姓と名のテキストフォームを横に並べたいと希望する場合も多いと思います。
今回私は、ChatGPTと会話しながら、テキストフォームを横並びにするコードを書きました。

<div class="from_name">
    <div class="item-box">
        <p><label> 姓（必須</p>
        <p>[text* your-name class:name01]</p>    
    </div>
    <div class="item-box">
        <p><label> 名（必須）</p>
        <p>[text* your-name2 class:name02]</p>   
    </div>    
</div>

CSSは、こちら

.from_name {
  display: flex;
  flex-wrap: wrap;
}

.item-box {
  flex: 1;
  margin: 0 10px;
  max-width: 300px; /* 任意の値 */
  width: calc(50% - 20px);
  box-sizing: border-box;
}

/* 最初の.item-box要素を左寄せに配置 */
.item-box:first-child {
  margin-left: 0;
}

ChatGPTの解説は、こちらです。

上記のCSSでは、.item-box要素に対してwidth: calc(50% - 20px);を追加しています。これによって、.item-box要素の幅を親要素の50%に設定し、marginプロパティによる余白分の幅を差し引いた値を指定しています。また、box-sizing: border-box;を追加することで、.item-box要素の幅にpaddingやborderが含まれるようにしています。

これによって、.item-box要素は同じ幅になります。ただし、.item-box要素の数を増やした場合や、max-widthプロパティの値を変更した場合には、適切な値に調整する必要があるかもしれません。

上記のCSSでは、.item-box:first-childセレクタを使用して、最初の.item-box要素に対してmargin-left: 0;を指定しています。これによって、最初の.item-box要素は左寄せに配置されます。

また、余白を左右対称にしたい場合は、.item-box要素のmargin: 0 10px;をmargin: 0 5px;など、左右の余白幅を半分にする値に変更することができます。

二つ目のテキストフォームが右にわずかに短くなる

今回左側を揃えた関係で、右側が他のテキストフォームよりも、僅かに短くなりました。
これは、適宜調整してください。

一応ChatGPTに質問してみたら、下記のコードを書いてくれました。

.from_name {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 右寄せではなく、両端に寄せる */
}

.item-box {
  flex-basis: calc(50% - 20px); /* flex-basisプロパティを使用して、均等に配置 */
  margin: 0 5px; /* 余白幅を半分にする */
  box-sizing: border-box;
}

/* 最初の.item-box要素を左寄せに配置 */
.item-box:first-child {
  margin-left: 0;
}

/* スマホの場合 */
@media screen and (max-width: 480px) {
  .from_name {
    flex-direction: column;
  }

  .item-box {
    flex-basis: 100%;
    margin: 0;
  }
}

パソコンなどの場合は、BOXが両端によって、スマホの場合は、縦にBOX要素が並びます。
でも、若干右が短くなります。
これは、marginの設定が効いているためです。
このあたりは、実装する際に、調整してください。