Build a Survey Form - Cant get the CSS right

HTML-CSS
1

Tell us what’s happening:
i cant alignt all my inputs, can someone show me how to properly do it?

thanks!!

Your code so far

<!DOCTYPE html>
<html>
<head>
	<title>Form</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
	<h1 id="title"> Survey Form</h1>

	<div class="container">
		<p id="descritpion"> Lets improve our program!</p>
		<form id="survey-form">
		<div class="leftright">
			<div class="left">
				<label id="name-label" for="name">*Name: </label>
			</div>
			<div id="right" class="right">
				<input type="text" name="name" id="name" class="input-field" placeholder="Enter your Full Name" required>
			</div>
		</div>
		<div class="leftright">
			<div class="left">
				<label id="email-label" for="Email">*Email: </label>
			</div>
			<div id="right" class="right">
				<input type="Email" name="Email" id="email" class="input-field" placeholder="Enter your Email" required>
			</div>
		</div>
		<div class="leftright">
			<div class="left">
				<label id="number-label" for="Age">*Age:</label>
			</div>
			<div id="right" class="right">
				<input type="number" name="Age" id="age" class="input-field" min="1" max="120" required>
			</div>
		</div>
		<div class="leftright">
			<div class="left">
				<label id="dropdown" for="dropdown">Whats your status:</label>
			</div>
			<div id="right" class="right">
				<select id="dropdown" name="dropdown" class="dropdown">
				<option value="Married">Married</option>
				<option value="Single">Single</option>
				<option value="divorced">Divorced</option>
				<option value="complicated">Complicated</option>
				</select>
			</div>
		<div class="leftright">
			<div class="left">
				<label id="radio" for="radio">How would you describe this form?</label>
			</div>
			<div id="right" class="right">
			
					<li>
						<input type="radio" name="radio" class="radio">EXCELLENT! 
					</li>
					<li>
						<input type="radio" name="radio" class="radio">OK! 
					</li>
					<li>
						<input type="radio" name="radio" class="radio">COOL!
					</li>
					<li>
						<input type="radio" name="radio" class="radio">TERRIBLE!
					</li>
				</ul>
			</div>
		</div>

			<div class="leftright">
			<div class="left">
				<label id="checkbox" for="checkbox">What would change in this form?</label>
			</div>
			<div id="right checker" class="right">
				<li><input type="checkbox" name="checkbox" value="All"> All of it!</li>
				<li><input type="checkbox" name="checkbox" value="HTML"> HTML</li>
				<li><input type="checkbox" name="checkbox" value="CSS"> CSS</li>
				<li><input type="checkbox" name="checkbox" value="JS"> Javascript</li>
				<li><input type="checkbox" name="checkbox" value="nothing"> nothing</li>
				
			</div>
		</div>
		</form>
	</div>

</body>
</html>

CSS:

body	{
background-color: orange;
text-align: center;

}

.container{
  background-color: rgb(250, 250, 250);
  margin: 0 auto;
  border: 1px black solid;
  border-radius: 4px;
  width: 75%;
  max-width: 900px;
  padding: 10px;
  padding-top: 20px;
}
.left{
	float: left;
	vertical-align: top;
	text-align: right;

}
.right {

  display: inline-block;
  text-align: left;
  width: 55%;
  vertical-align: top;
  border: 0 10px;
  margin: 0 10px;
  padding: 0 10px;
  list-style: none;
}


.input-field{
	width: 48%;
}

.checker {
	width: 20px;
	margin: 10px 10px;
	border: 10px 10px;
	padding: 10px 10px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:

You can also see it at my codepen:

2

I would suggest different container elements for labels and different for input fields themselves. Then for example, align label to right side and inputs to left side.

3

This pen is overly simplified. Ps: for this task, alignment, bootstrap is perfect if you decide to use it. Edit: Also css grids.

4

but how would i alignt both of these containers?

would i link the labels with the inputs? how?

thanks!

5

Take another look into it, i just added border to both container to give you visual feel of how.

6

i see, but which is the actual command that is giving it the alignment? is the display: block on label,input or the height on labels that is holding the box?

im having a hard time with these simple concepts.

thanks !!!

7

display: block; puts elements one below another(label under another label, input under another input)
display: inline-block; puts element side by side(containers)
line-height align’em up nicely. Ps: it depends on font-size …
Fork this pen and fiddle with it.