A little help with contact form fields positioning

Hi

I’m trying to make a minimalistic contact form for our web page. I can’t get to position the contact fields as we want.
Here’s the code we are using with contact form 7. We’ve added the avia format so as to have same format in all the webpage:

<div class="avia_ajax_form">
<p class="first_form form_element form_element_half">Nombre<br />
    [email* your-name class:text_input] </p>
<p class="first_form form_element form_element_half">E-Mail<br />
    [text* your-email class:text_input] </p>

<p class="form_element form_element_half">Mensaje
    [textarea* your-message class:text_area] </p>
</div>[honeypot important-53]

<p class="submit" align="center">[submit "Enviar consulta"]</p>

This is what we get:

This is what we’d like to have (photoshopped):

Could anybody help me out?
Thanks a lot