Formatting html form - html

Question

I am trying to render a html form like this: http://i.imgur.com/V53sv8F.jpg
The problem I am facing are:
I am not able to make the fields go in next line after the label
I haven't been able to get the firld length of first and last combined to be as long as that of the email (or password)
Any help is much appreciated.
HTML Code:
<form>
<label for="Name"><strong> Your Name:</strong></label>
<input type="text" id="Name_First" name="Name_First" required>
<input type="text" id="Name_Last" name="Name_Last" required>
<label for="Email">Email Address:<input type="email" id="Email" name="Email" vrequired></label>
<label for="RegPassword">Password:<input type="password" id="RegPasswordRegPassword" name="RegPassword" required></label>
<form>
JS Fiddle link: http://jsfiddle.net/d6a4h9o8/

Answer 1

For starters, your HTML is wrong, so no solution will work if you don't fix it first. So let's start with that:
<form>
<div class="row">
<label for="Name"><strong> Your Name:</strong></label>
<input type="text" id="Name_First" name="Name_First" />
<input type="text" id="Name_Last" name="Name_Last" />
</div>
<div class="row">
<label for="Email">Email Address:</label><input type="email" id="Email" name="Email" />
</div>
<div class="row">
<label for="RegPassword">Password:</label><input type="password" id="RegPasswordRegPassword" name="RegPassword" />
</div>
<form>
Now that we have proper markup and have added some divs to aid with styling (pay attention to those class="row" divs) we can apply CSS this way:
form {
background:#ccc;
padding:30px;
margin:0 auto;
width:50%
}
form label {
display: block;
}
input {
width:300px;
}
.row {
width:300px;
clear:both;
display:block;
position:relative;
margin:5px auto
}
.row:first-child input {
width:142px;
}
.row:first-child input:last-child {
position:absolute;
right:-5px;
width:144px
}
See fiddle to see the result
Now, there are MANY ways to do it, this is just one, but the most important part is to have your markup fixed, then styling it is really easy.

Answer 2

Here is working example similar to the picture.
HTML
<form>
<label for="Name"><strong> Your Name:</strong></label>
<input type="text" id="Name_First" name="Name_First" required>
<input type="text" id="Name_Last" name="Name_Last" required>
<label for="Email">Email Address:</label>
<input type="email" id="Email" name="Email" vrequired>
<label for="RegPassword">Password:</label><input type="password" id="RegPassword" name="RegPassword" required>
<form>
CSS.
form{
max-width: 500px;
background: #d4d4d4;
padding: 20px;
}
form label {display: block;}
input{padding: 7px 0;font-size: 25px;}
input[type="text"]{width:48.2%;}
input[type="email"],input[type="password"]{width: 98%;}
}

Answer 3

Try this:
label {
display: block;
clear: both;
}
You'll still have to do additional styling, of course.

Answer 4

use
#Name_First {
...
}
to target specific element with your css styles.
and try read through http://www.htmldog.com/guides/css/beginner/applyingcss/
what you want to focus on should be "display" and "width"