How to have multiple fields in the same row of your Contact Form?

When using the Contact Form, the default layout is to have one field per row. However, you can have multiple fields in the same row by adding some HTML markup. For example:

With Columns One Third / Three fields in the same row:

<div class="grve-one-third">Your Name (required) [text* your-name]</div>
<div class="grve-one-third">Your Email (required) [email* your-email]</div>
<div class="grve-one-third grve-last-column">Subject [text your-subject]</div>
[textarea your-message]
<p>[submit "Send your message"]</p>

With Columns One Half / Two fields in the same row and centered submit button :

<div class="grve-one-half">Your Name (required) [text* your-name]</div>
<div class="grve-one-half grve-last-column">Your Email (required) [email* your-email]</div>
[textarea your-message]
<p class="grve-align-center">[submit "Send your message"]</p>