Inline & Block Form Inputs together - css

Question

I'm trying to give my form a layout like the one shown on this image http://reversl.net/demo/ where the firstname and surname inputs are inline but all other inputs are stacked (i.e. on top of each other). I currently have something like this http://reversl.net/form/ using the following markup;
<div class="container">
<form>
<ol>
<li>
<label for=name>Firstname:</label>
<input id=name name=name type=text placeholder="Jon" required autofocus>
</li>
<li>
<label for=name>Surname:</label>
<input id=surname name=surname type=text placeholder="Doe" required autofocus>
</li>
<li>
<label for=message>Message:</label>
<textarea id=message name=message placeholder="Type your message here..." required></textarea>
</li>
</ol>
</form>
</div>
Styled as follows;
label {
display: block;
line-height: 1.75em;
}
input, textarea {
width: 250px;
display: inline-block;
margin-bottom: 2em;
padding: .75em .5em;
color: #999;
border: 1px solid #e9e9e9;
outline: none;
}
input:focus, textarea:focus {
-moz-box-shadow: inset 0 0 3px #aaa;
-webkit-box-shadow: inset 0 0 3px #aaa;
box-shadow: inset 0 0 3px #aaa;
}
textarea {
height: 100px;
}

Answer 1

Give the first two LIs display: inline-block and adjust paddings/margins as necessary.

Answer 2

I make it
HTML
<div class="container">
<form>
<ul style="float: left">
<label for="name">Firstname</label>
<input id="name" autofocus="" name="name" placeholder="Jon" required="" type="text">
</ul>
<ul style="float: left">
<label for="name">Surname</label>
<input id="surname" autofocus="" name="surname" placeholder="Doe" required="" type="text">
</ul>
<br><br><br><br><br>
<ul>
<ul style="padding: 0px; margin: 0px">
Message</ul>
<textarea id="message" name="message" placeholder="Type your message here..." required="" style="width: 536px"></textarea>
</ul>
</form>
</div>
and CSS
label {
display: block;
line-height: 1.75em;
}
input, textarea {
width: 250px;
display: inline-block;
margin-bottom: 2em;
padding: .75em .5em;
color: #999;
border: 1px solid #e9e9e9;
outline: none;
}
input:focus, textarea:focus {
-moz-box-shadow: inset 0 0 3px #aaa;
-webkit-box-shadow: inset 0 0 3px #aaa;
box-shadow: inset 0 0 3px #aaa;
}
textarea {
height: 100px;
}
ul {
margin: 0px;
}