As I am creating a form, my goal is to align the information within it in a way that places the questions on the left side and the options on the right.
I have experimented with utilizing IDs, centering them, and adjusting their positioning from left to right.
#wholeform {
background-color: white;
display: inline-block;
text-align: center;
vertical-align: top;
line-height: 2.0;
border-radius: 7px;
}
#title {
max-width: 400px;
margin: 20px;
text-align: center;
}
#survey-form {
text-align: center
}<div id="wholeform">
<p id="description">Let us know how we can improve freeCodeCamp<p>
<form id="survey-form">
* Name: <input type="text" name="fullname"><br>
* Email: <input type="text" name="email"><br>
* Age: <input type="text" name="age"><br>
Which option best describes your current role?<select name="status">
<option value="student">Student</option>
<option value="full time job">Full Time Job</option>
<option value="full time learner">Full Time Learner</option>
<option value="Prefer not to say">Prefer not to say</option>
<option value="Other">Other</option>
</select><br>
* How likely is that you would recommend freeCodeCamp to a friend?<br>
<input type="radio"> Definitely<br>
<input type="radio"> Maybe</br>
<input type="radio">Not sure</br>
What do you like most in FCC:<select name="options">
<option value="challenges">Challenges</option>
<option value="projects">Projects</option>
<option value="community">Community</option>
<option value="open source">Open Source</option></select></br>
Things that should be improved in the future(Check all that apply)<input type="checkbox" name="front-end" value="Front-end Projects"> Front-end Projects</br>
<input type="checkbox" name="Back-end Projects" value="Back-end Projects" checked> Back-end Projects</br>
<input type="checkbox" name="Data Visualization" value="Data Visualization" checked> Data Visualization</br>
<input type="checkbox" name="Challenges" value="Challenges" checked> Challenges</br>
<input type="checkbox" name="Open Source Community" value="Open Source Community" checked> Open Source Community</br>
<input type="checkbox" name="Gitter help rooms" value="Gitter help rooms" checked> Gitter help rooms</br>
<input type="checkbox" name="Videos" value="Videos" checked> Videos</br>
<input type="checkbox" name="City Meetups" value="City Meetups" checked> City Meetups</br>
<input type="checkbox" name="Wiki" value="Wiki" checked> Wiki</br>
<input type="checkbox" name="Forum" value="Forum" checked> Forum</br>
<input type="checkbox" name="Additional Courses" value="Additional Courses" checked> Additional Courses</br>
Any Comments or Suggestions?<name="comments" id="comments">
Enter your comment here...
</textarea><br>
<input type="submit">
</form>
</div>Result expected - Questions aligned left, Options aligned right