Survey Form - FEEDBACK & UNABLE TO HOLD INPUT & RADIO BUTTON IN SAME LINE

Hey guys! I have been trying to hold radio button and input text in same line but I’m unable to.
It will be really helpful if you guys look my code and tell me the error.

AND ALSO, IT IS WELCOME IF THERE IS ANY CORRECTION OR IMPROVEMENT NEEDED, PLEASE LET ME KNOW. YOUR FEEDBACK WILL BE REALLY HELPFUL.

Your code so far

HTML CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-learning Form</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title">E-learning Survey Form</h1>
    <p id="description">Thank you for taking the time to help us impove the platform</p>

    <form method="post" action='https://register-demo.freecodecamp.org' id="survey-form">
      <fieldset>
        <label id="name-label">Name <input id="name" type="text" placeholder="Enter your name" required></label>
        <label id="email-label">Email <input id="email" type="email" placeholder="Enter your Email" required></label>
        <label id="number-label">Age (optional) <input id="number" type="number" min="13" max="120" placeholder="Age"></label>
        <label id="dropdown-label">Which option describes your current role?
          <select id="dropdown">
            <option value="">Select current role</option>
            <option value="1">Student</option>
            <option value="2">Full time Job</option>
            <option value="3">Full time Learner</option>
            <option value="4">Prefer not to say</option>
            <option value="5">Other</option>
          </select>
        </label>
        <label>Would you recommend E-learning to your friends?
          <input class="inline" type="radio" id="definitely" value="definitely" name="recommend" checked />Definitely
          <input class="inline" type="radio" id="maybe" value="maybe" name="recommend" />Maybe
          <input class="inline" type="radio" id="not-sure" value="not-sure" name="recommend" />Not sure
        </label>
        <label>What is your favourite feature of E-learning?
          <select id="dropdown">
            <option value="">Select an option</option>
            <option value="1">Challenges</option>
            <option value="2">Projects</option>
            <option value="3">Community</option>
            <option value="4">Open source</option>
          </select>
        </label>
        <label>What would you like to see improved? (Check all that apply)
          <input value="front-end projects" class="inline" type="checkbox" id="front-end projects" name="improvements">Front-end Projects
          <input value="back-end-projects" class="inline" type="checkbox" id="back-end projects" name="improvements">Back-end Projects
          <input value="data-visualization" class="inline" type="checkbox" id="data-visualization" name="improvements">Data Visualization
          <input value="challenges" class="inline" type="checkbox" id="challenges" name="improvements">Challenges
          <input value="open-source-community" class="inline" type="checkbox" id="open-source-community" name="improvements">Open Source Community
          <input value="gitter-help-rooms" class="inline" type="checkbox" id="gitter-help-rooms" name="improvements">Gitter Help Rooms
          <input value="videos" class="inline" type="checkbox" id="videos" name="improvements">Videos
          <input value="city-meetups" class="inline" type="checkbox" id="city-meetups" name="improvements">City Meetups
          <input value="wiki" class="inline" type="checkbox" id="wiki" name="improvements">Wiki
          <input value="additional-courses" class="inline" type="checkbox" id="additional-courses" name="improvements">Additional Courses
        </label>
        <label>Any comments or suggestions?
          <textarea id="suggestions" placeholder="Enter your comment here..." rows="3" cols="30"></textarea>
        </label>
      </fieldset>
      <input id="submit" value="submit" type="submit">
    </form>
  </body>
</html>

CSS CODE:

body {
    width: 100%;
    background-color: #1b1b32;
    color: white;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
}

h1, p {
    margin: 1rem auto;
    text-align: center;
}

label {
    display: block;
    margin: 1em auto;
}
input, textarea, select {
    display: block;
    margin: 0.5em 0;
    width: 100%;
    min-height: 1.5rem;
}

input, textarea {
    background-color: #0a0a23;
    color: white;
    border: 1px solid #0a0a23;
}

form {
    width: 60%;
    min-width: 300px;
    max-width: 500px;
    margin: auto auto;
}

fieldset {
    border: none;
    border-bottom: 3px solid #0a0a23;
}

input[type="submit"] {
    width: 60%;
    display: block;
    margin: 1em auto;
    font-size: 1em;
    min-height: 2em;
    background-color: #3b3b4f;
    border-color: white;
    min-width: 300px;
}

.inline {
    width: unset;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

The radio and checkbox form elements should each have their own label element. If you do that you can also use that label element as the container to do layout, for example using Flexbox.

You have set all input elements to be block-level elements. You can overwrite the styles using attribute selectors (you also have a .inline class) for the radio/checkbox elements (e.g. to inline-block) to let the text sit next to them.

I would use Flexbox on the label elements but you have to target the specific label elements not just all label elements.

Example:

<label class="form-group">
  <input class="inline" type="radio" id="definitely" value="definitely" name="recommend" checked>Definitely
</label>
.form-group {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}

It worked and understood the flexbox!
Thanks for sharing :smiling_face:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.