JSFiddle - React, Tailwind, and code Playground

HTML

<p>■名前<span style="color: red;">(必須)</span><br />
<div class="contact_form clearfix">
<div class="contact_left">
姓 [text* your-Lname class:xxxxxx]</div>
<div class="contact_right">
名 [text* your-Fname class:xxxxxx]</div></p>

CSS

.contact_form{
    display: block;
    }
 
 /* お問い合わせ左側 */
.contact_left{
    float: left;
    width: 260px;
    }
 
 /* お問い合わせ右側 */
.contact_right{
    float: right;
    }
 
 /* テキストフォームの設定 */
.wpcf7-text{
    margin: 6px 0 24px;
    padding: 11px;
    width: 260px;
    color: #636063;
    font-family: "Myriad Pro", Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
    font-size: 16px;
    border: none;
    background: url(images/bg.png);
    }
 
 /* テキストフォームのフォーカス時の設定 */
.wpcf7-text:focus{
    background: url(images/bg_on.png);
    }
 
 /* テキストエリアの設定 */
.wpcf7-textarea{
    margin: 6px 0 24px;
    padding: 11px;
    width: 500px;
    height: 218px;
    color: #636063;
    font-family: "Myriad Pro", Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
    font-size: 16px;
    border: none;
    background: url(images/bg.png);
    }
 
 /* テキストエリアのフォーカス時の設定 */
.wpcf7-textarea:focus{
    background: url(images/bg_on.png);
    }
 
 /* 送信ボタンの設定 */
.wpcf7-form-control.wpcf7-submit{
    display: block;
    width: 180px;
    height: 40px;
    border: none;
    text-indent: -9999px;
    background: url(images/send.png) no-repeat;
    }
 
 /* 送信ボタンのフォーカス時の設定 */
.wpcf7-form-control.wpcf7-submit:hover{
    filter: alpha(opacity=80);
    opacity: .6;
    -moz-transition: all 0.7s ease;
    -webkit-transition: all 0.7s ease;
    }
 
.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
 
.clearfix{
    overflow:hidden;
    }