<form class="contact-form" novalidate>
  <div class="form-row">
    <div class="input-group">
      <label class="input-label" for="firstName">First Name</label>
      <input class="input" id="firstName" type="text" placeholder="John" />
    </div>
    <div class="input-group">
      <label class="input-label" for="lastName">Last Name</label>
      <input class="input" id="lastName" type="text" placeholder="Doe" />
    </div>
  </div>
  <div class="input-group">
    <label class="input-label" for="contactEmail">Email</label>
    <input class="input" id="contactEmail" type="email" placeholder="you@example.com" />
  </div>
  <div class="input-group">
    <label class="input-label" for="subject">Subject</label>
    <input class="input" id="subject" type="text" placeholder="How can we help?" />
  </div>
  <div class="input-group">
    <label class="input-label" for="message">Message</label>
    <textarea class="input" id="message" rows="5" placeholder="Write your message..."></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Send Message →</button>
</form>

<style>
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
textarea.input { resize: vertical; min-height: 120px; }
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }
</style>