alinhamento de conteudo

olá preciso deixar um formulário alinhado desta forma

nome,email,telefone de um lado, e a mensagem e o botão de enviar do outro. Só que meu código não está funcionando. Poderiam me ajudar?

HTML

 <div id="box"><div id="box2">

 <p>Nome</p>
 <p>
 <input type="text" name="nome">
 </p>
 <p>
 E-mail
 </p>
 <p>
 <input type="text" name="email">
 </p>
 <p>
 Telefone
 </p>
 <p>
 <input type="text" name="telefone">

 </p>
 <div id="lado">
 <p>Mensagem</p>
 <p>
 <textarea name="mensagem" cols="" rows="5"></textarea>
 </p>
 </div>

 </div></div>
 </form>

CSS

#box{
	width:100%;
	background-color:#F4F4F4;
	color:#666;
	height:auto;
	border: 1px solid #CCC;
	padding:10px;
	float:left;
	margin-bottom:10px;
	margin-top:10px;

}

#lado{
	float:left;
	border:thin;
 width:200px;

}
#box2{
	width:700px;
	background-color:#F4F4F4;
	color:#666;
	height:auto;

	padding:10px;
	float:left;
	margin-bottom:10px;
	margin-top:10px;

}