Build a Survey Form - Label to left of Input Issue

#1

Tell us what’s happening:
I’ve generally just followed the code of the example given just to learn a little easier. I made a few adjustments of my own, but doing this has helped me learn/re-learn. I’m about done and I’m pretty sure my page will pass the test, but I want my labels to go to the left of the inputs, as in the example. Mine just go above. I will post HTML code then CSS code below in that order.

Your code so far

OSRS Runecrafting Club Sign-Up Sheet

Enter details and basic account information below to sign-up for our OSRS-themed club!

* RSN:
* Email:
* Runecrafting Level:
* Please select your general feeling towards RC'ing:
Select general level you fall into RC... slow. bad. I only RC for diaries Double Cosmic RC'ing isn't bad I don't mind RC'ing any high-level rune I need I RC for fun Other/Not Listed
How likely are you to recommend RC'ing to a friend?
  • NO. SLOW. BAD.
  • Somewhat
  • Definitely
  • Not Sure
What do you most like about RC'ing?
Select an option What kind of club is this? The flow of it is relaxing How mindless and easy it is Going through the abyss Having runes after I'm done to sell or use
Things about RC that could improve
(Check all that apply):
  • Make process of crafting, then emptying bags, then crafting again, smoother
  • Make going through abyss obstacles less clunky
  • Make it auto-craft essence that is in bag
  • Scale the essence bags down levels to add a fifth essence bag
  • None of these I don't even want to be in your dumb RC club
Add any additional information regarding ideas for Runecrafting updates and/or info. about yourself:
Craft Essence
(Submit)

@import url("");

body {
background-image: url("");
background-color: black;
background-size: auto;
height: auto;
background-position: center;
background-repeat: repeat-y;
background-attachment: fixed;
}
html,
body {
background-color: black;
color: hsl(280, 30%, 40%);
text-align: center;
font-family: PT Sans, Helvetica, sans-serif;
min-width: 320px;
}
header {
font-weight: bold;
font-size: 22px;
color: hsl(230, 40%, 60%);
margin: 10px;
padding: 20px;
}
#form-outer {
background-color: hsl(230, 40%, 80%);
border-radius: 20px;
margin: 0 auto;
width: 65%;
max-width: 900px;
padding: 30px;
padding-top: 10px;
}
.labels {
color: #3333cc;
display: inline-block;
text-align: right;
width: 70%;
padding: 5px;
vertical-align: top;
margin-top: 10px;
}
.rightTab {
display: inline-block;
text-align: left;
width: 88%;
vertical-align: middle;
}
.input-field {
height: 15px;
width: 160px;
padding: 5px;
margin: 7px;
border: solid 1px #000000;
border-radius: 3px;
}
.userRatings,
input[type=“checkbox”] {
float: left;
margin-right: 5px;
}
#submit {
background-color: #666fff;
color: #66ffff;
border-radius: 6px;
font-size: 20px;
height: 65px;
width: 200px;
margin: 20px;
border: 2px solid;
}
.dropdown {
height: 30px;
width: 220px;
padding: 5px;
margin: 5px;
margin-top: 10px;
border-radius: 3px;
border: 1px solid black;
}
.radio,
.checkbox {
position: relative;
left: -43px;
margin-left: 10px;
display: block;
padding-bottom: 10px;
}
@media screen and (max-width: 833px) {
.input-field {
width: 80%;
}
select {
width: 90%;
}
}

@media screen and (max-width: 520px) {
.labels {
width: 100%;
text-align: left;
}
.rightTab {
width: 80%;
float: left;
}
.input-field {
width: 100%;
}
select {
width: 100%;
}
}
Your browser information:
I’m using Firefox but I don’t think it should matter to much for this issue because I’m displaying both pages in the same browser.
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0.

#2

I think I used CSS Grid to do that. I put all the questions within the left column, justified to the right, and all the answers in the right column. Hope this helps!

#3

It helps a lot. I did fogure it out though. I had some help from a friend. Basically my width values were too high and caused items to not go on the same line or something like that. I also fucked up when I tried to post my code in the question. Oh well, very new to this.

#4