Why my radio button option showing in block ? How to set it inline? Thanks for your knowledge

[ProgrammingTed]

My Contact Form 7 ``

Name [text your-name]

Gender [radio radio-gender default:1 "Male" "Female"]

Age* [text* your-age minlength:2 maxlength:2] Contact Number* [text* text-mobile2 minlength:10 maxlength:10] Email* [email* your-email]

Height* [text* your-height] NRIC* [text* your-nric minlength:12 maxlength:12] Contact Number 2* [text* text-mobile minlength:10 maxlength:10]

Worker Qualification* [text* your-HighestEducationLevel]

<p style = "font-size:15px;line-height:0.3;">Are You Full/Part Time Worker?* <p style = "font-size:10px;"> (If part time, what is your full time job?)</p> [text* your-jobstatus]</p>

Address* [text* text-address]

Area Covered* [text* text-areacovered]

<p style = "font-size:15px;line-height:0.3;">Working Experience*  [text* text-WorkrExperience]</p>
<p style = "font-size:15px;"> Remarks [textarea textarea-Remark]</p>

[submit "Send"]

Css I add in css stylesheet ``#left { width:47%; float:left; margin-right:6%; }

right {

 width:47%;
 float:left;

}

.clearfix:after { content:"\0020"; display:block; height:0; clear:both; visibility:hidden; overflow:hidden; margin-bottom:6px; }

.clearfix{ display:block; }

How to set the radio button option inline??

Gender [radio radio-gender default:1 "Male" "Female"]

Thank you .

[gidomanders]

I see you're not using the Bootstrap for CF7 format, which means the text for each form element won't be a label. Check the setup guide to see how you can format forms correctly.

To answer your question, if you're using the Bootstrap for CF7 plugin, you'll see the radio buttons are wrapped in a div element. To show them next to each other, you can add the following CSS to your page.

.wpcf7-radio .radio {
    display: inline-block;
}
.wpcf7-radio .radio ~ .radio {
    margin-left: 15px; // Some extra space between the options
}