How can I neatly line up the checkbox and radio box - css

Question

I'm not sure how I'm suposed neatly line inputs in a row. I tried using flex and position: relative (for the label) but that didn't work for me. I'm trying to make it look like this for example for both my checkboxes and radios:
But this is what I got instead:
Please explain how I can find a solution to this problem.
https://codepen.io/Yisego45873/pen/WNEJPVx
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Quicksand&display=swap');
* {
box-sizing: border-box;
text-align: center;
font-family: 'Playfair Display', serif;
font-family: 'Quicksand', sans-serif;
}
body {
background: linear-gradient(40deg, transparent 40%, rgb(41, 39, 39)), linear-gradient(-40deg, rgb(78, 75, 75) 20%, #81777d 90%);
}
header {
color: white;
}
div {
background-color: rgb(68, 65, 65);
padding: 35px;
opacity: 200%;
margin: 0 30px;
border: rgb(41, 39, 39) solid 3px;
border-radius: 3px;
margin-bottom: 20px;
}
form {
color: white;
}
#sect-1 label {
margin: 0 0 15px;
color: white;
}
#sect-1 input {
border: white;
width: 50%;
border-radius: 2px;
padding: 10px;
margin: 15px;
}
select {
border: white;
width: 50%;
color: #4d4a4a;
border-radius: 1px;
padding: 10px;
margin: 15px;
color: black;
}
span {
font-style: italic;
opacity: 80%;
}
select option {
color: black;
}
#range {
width: 50%;
}
input[type=checkbox] {
-ms-transform: scale(1.5);
/* IE */
-moz-transform: scale(1.5);
/* FF */
-webkit-transform: scale(1.5);
/* Safari and Chrome */
-o-transform: scale(1.5);
/* Opera */
transform: scale(1.5);
}
input[type=radio] {
/* IE */
-ms-transform: scale(1.4);
/* FF */
-moz-transform: scale(1.4);
/* Safari and Chrome */
-webkit-transform: scale(1.4);
/* Opera */
-o-transform: scale(1.4);
transform: scale(1.4);
position: absolute;
left: 300px;
}
textarea {
padding: 5px;
margin: auto;
/* IE */
-ms-transform: scale(1.4);
/* FF */
-moz-transform: scale(1.4);
/* Safari and Chrome */
-webkit-transform: scale(1.4);
/* Opera */
-o-transform: scale(1.4);
transform: scale(1.4);
color: black;
margin-bottom: 50px;
margin-top: 50px;
text-align: left;
}
label {
margin-top: 30px;
margin-bottom: 5px;
}
#sect-1 {
color: black;
}
input[type=submit] {
background-color: rgb(41, 39, 39);
border: rgb(41, 39, 39) 10px solid;
width: 50%;
margin-top: 10px;
border-radius: 5px;
}
input[type=submit]:hover {
background-color: rgb(110, 108, 108);
border: 10px solid rgb(110, 108, 108);
cursor: pointer;
}
#range-section {
margin-bottom: 15px;
}
#sect-2,
#sect-3 {
display: flex;
}
#sect-2,
#sect-3 label {
position: relative;
}
<header>
<h1 id="title">Art Course Survey Page</h1>
<p id="description">Any feedback would be appreciated.</p>
</header>
<div>
<form id="survey-form" action="#" method="post">
<section id="sect-1">
<label id="name-label" for="name">Name</label><br />
<input type="text" name="name" id="name" placeholder="Enter your name" required="required" /><br />
<label id="email-label" for="email">Email</label><br />
<input type="email" name="email" id="email" placeholder="Enter your email address" required="required" /><br />
<label id="number-label" for="number">Age <span>(optional)</span></label><br />
<input type="number" name="number" id="number" placeholder="Age" min="1" max="99" /><br />
<label id="gender" for="gender-drop">Gender <span>(optional)</span></label><br />
<select name="gender" id="gender-drop">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</section>
<section id="dropdown-section">
<label for="dropdown">Which course did you take?</label><br />
<select required="required" name="course" id="dropdown" size="1">
<option value="level1">Beginner Course</option>
<option value="level2">Beginner-Intermediate Course</option>
<option value="level3">Intermediate Course</option>
<option value="level4">Advanced Course</option>
<option value="level5">Expert Course</option>
</select>
</section>
<br />
<section id="range-section">
<label for="range">How was your experience?</label><br />
<small>Terrible!</small>
<input type="range" required="required" id="range" name="range" min="0" max="4" value="0" /><small>Excellent!</small>
</section>
<section id="sect-2">
<label for="y/n"> Would you recommend this course to a friend?</label><br />
<label for="yes">
<input type="radio" required="required" id="yes" name="y/n" value="Yes" checked="checked" />
Yes
</label><br />
<label for="no">
<input type="radio" required="required" id="no" name="y/n" value="No" /> No
</label><br />
<label for="maybe">
<input type="radio" required="required" id="maybe" name="y/n" value="Maybe" /> Maybe
</label><br />
</section>
<section id="sect-3">
<p>What would you like to see improved? <span>(Check all that apply)</span></p>
<label for="improve1">
<input type="checkbox" id="improve1" name="improve1" value="Layout" /> Course
Layout/Paths
</label><br />
<label for="improve2">
<input type="checkbox" id="improve2" name="improve2" value="Videos" /> Course
Videos/Instruction
</label><br />
<label for="improve3">
<input type="checkbox" id="improve3" name="improve3" value="Community" />
Community Features
</label><br />
<label for="improve4">
<input type="checkbox" id="improve4" name="improve4" value="Support-Help" /> Support
</label><br />
<label for="improve5">
<input type="checkbox" id="improve5" name="improve5" value="Other" /> Other
</label>
</section>
<section id="sect-4">
<!-- <label id="txt-label" for="textarea">Any extra comments are welcome!</label> -->
<textarea rows="4" cols="50" id="textarea" placeholder="Any extra comments, suggestions, and complaints go here."></textarea><br />
<input id="submit" type="submit" value="Submit" style="color: white;" />
</section>
</form>
</div>

Answer 1

I took the previous media queries out and just gave the sections those styles.
section#sect-2,
section#sect-3 {
text-align: left;
display: inline-block;
}
I also added <br> which is a line break element under your #dropdown-section next to your closing section tag.
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Quicksand&display=swap');
* {
box-sizing: border-box;
text-align: center;
font-family: 'Playfair Display', serif;
font-family: 'Quicksand', sans-serif;
}
body {
background: linear-gradient(40deg, transparent 40%, rgb(41, 39, 39)),
linear-gradient(-40deg, rgb(78, 75, 75) 20%, #81777d 90%);
}
header {
color: white;
}
div {
background-color: rgb(68, 65, 65);
padding: 35px;
opacity: 200%;
margin: 0 30px;
border: rgb(41, 39, 39) solid 3px;
border-radius: 3px;
margin-bottom: 20px;
}
form {
color: white;
}
#sect-1 label {
margin: 0 0 15px;
color: white;
}
#sect-1 input {
border: white;
width: 50%;
border-radius: 2px;
padding: 10px;
margin: 15px;
}
select {
border: white;
width: 50%;
color: #4d4a4a;
border-radius: 1px;
padding: 10px;
margin: 15px;
color: black;
}
span {
font-style: italic;
opacity: 80%;
}
select option {
color: black;
}
#range {
width: 50%;
}
input[type=checkbox] {
-ms-transform: scale(1.5);
/* IE */
-moz-transform: scale(1.5);
/* FF */
-webkit-transform: scale(1.5);
/* Safari and Chrome */
-o-transform: scale(1.5);
/* Opera */
transform: scale(1.5);
}
input[type=radio] {
/* IE */
-ms-transform: scale(1.4);
/* FF */
-moz-transform: scale(1.4);
/* Safari and Chrome */
-webkit-transform: scale(1.4);
/* Opera */
-o-transform: scale(1.4);
transform: scale(1.4);
position: absolute;
left: 300px;
}
textarea {
padding: 5px;
margin: auto;
/* IE */
-ms-transform: scale(1.4);
/* FF */
-moz-transform: scale(1.4);
/* Safari and Chrome */
-webkit-transform: scale(1.4);
/* Opera */
-o-transform: scale(1.4);
transform: scale(1.4);
color: black;
margin-bottom: 50px;
margin-top: 50px;
text-align: left;
}
label {
margin-top: 30px;
margin-bottom: 5px;
}
#sect-1{
color: black;
}
input[type=submit] {
background-color: rgb(41, 39, 39);
border: rgb(41, 39, 39) 10px solid;
width: 50%;
margin-top: 10px;
border-radius: 5px;
}
input[type=submit]:hover {
background-color: rgb(110, 108, 108);
border: 10px solid rgb(110, 108, 108);
cursor: pointer;
}
#range-section{
margin-bottom: 15px;
}
#sect-2, #sect-3{
display: flex;
}
#sect-2, #sect-3 label{
position: relative;
}
section#sect-2,
section#sect-3 {
text-align: left;
display: inline-block;
}
<header>
<h1 id="title">Art Course Survey Page</h1>
<p id="description">Any feedback would be appreciated.</p>
</header>
<div>
<form id="survey-form" action="#" method="post">
<section id="sect-1">
<label id="name-label" for="name">Name</label><br />
<input type="text" name="name" id="name" placeholder="Enter your name" required="required" /><br />
<label id="email-label" for="email">Email</label><br />
<input type="email" name="email" id="email" placeholder="Enter your email address" required="required" /><br />
<label id="number-label" for="number">Age <span>(optional)</span></label><br />
<input type="number" name="number" id="number" placeholder="Age" min="1" max="99" /><br />
<label id="gender" for="gender-drop">Gender <span>(optional)</span></label><br />
<select name="gender" id="gender-drop">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</section>
<section id="dropdown-section">
<label for="dropdown">Which course did you take?</label><br />
<select required="required" name="course" id="dropdown" size="1">
<option value="level1">Beginner Course</option>
<option value="level2">Beginner-Intermediate Course</option>
<option value="level3">Intermediate Course</option>
<option value="level4">Advanced Course</option>
<option value="level5">Expert Course</option>
</select>
</section>
<br>
<section id="range-section">
<label for="range">How was your experience?</label><br />
<small>Terrible!</small>
<input type="range" required="required" id="range" name="range" min="0" max="4" value="0" /><small>Excellent!</small>
</section>
<section id="sect-2">
<label for="y/n"> Would you recommend this course to a friend?</label><br />
<label for="yes">
<input type="radio" required="required" id="yes" name="y/n" value="Yes" checked="checked" />
Yes
</label><br />
<label for="no">
<input type="radio" required="required" id="no" name="y/n" value="No" /> No
</label><br />
<label for="maybe">
<input type="radio" required="required" id="maybe" name="y/n" value="Maybe" /> Maybe
</label><br />
</section><br>
<section id="sect-3">
<p>What would you like to see improved? <span>(Check all that apply)</span></p>
<label for="improve1">
<input type="checkbox" id="improve1" name="improve1" value="Layout" /> Course
Layout/Paths
</label><br />
<label for="improve2">
<input type="checkbox" id="improve2" name="improve2" value="Videos" /> Course
Videos/Instruction
</label><br />
<label for="improve3">
<input type="checkbox" id="improve3" name="improve3" value="Community" />
Community Features
</label><br />
<label for="improve4">
<input type="checkbox" id="improve4" name="improve4" value="Support-Help" /> Support
</label><br />
<label for="improve5">
<input type="checkbox" id="improve5" name="improve5" value="Other" /> Other
</label>
</section>
<section id="sect-4">
<!-- <label id="txt-label" for="textarea">Any extra comments are welcome!</label> -->
<textarea rows="4" cols="50" id="textarea" placeholder="Any extra comments, suggestions, and complaints go here."></textarea><br />
<input id="submit" type="submit" value="Submit" style="color: white;" />
</section>
</form>
</div>