alinhamento de conteudo

[Deboracgs 0]

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;
	
}

[Marlon Pacheco 132]

Mudei um pouquinho.

http://codepen.io/marlonlp/pen/oKkGm