1
<!doctype html>
2
<title>Example</title>
3
<style>
4
  * {
5
    box-sizing: border-box;
6
  }
7
  .myForm {
8
    display: grid;
9
    grid-template-areas:
10
      "comments contact"
11
      "... button";
12
    grid-template-rows: 12em 2em;  
13
    grid-template-columns: 12em 1fr;
14
    grid-gap: .8em;
15
    background: #eee;
16
    padding: 1.2em;
17
  }
18
  .myForm label  {
19
    grid-area: labels;
20
  }
21
  .myForm input {
22
    grid-area: contact;
23
    width: 100%;
24
    padding: 1.1em;
25
    border: none;
26
    margin-bottom: 1em;
27
  }
28
  .myForm textarea {
29
   min-height: calc(100% - 2em);
30
   width: 100%;
31
   border: none;
32
  }
33
  #contact-details {
34
   grid-area: contact;
35
  }
36
  #comment-box {
37
   grid-area: comments;
38
  }
39
  .myForm button {
40
    grid-area: button;
41
    border: 0;
42
    background: gray;
43
    color: white;
44
  }
45
</style>
46
<form class="myForm">
47
  <div id="contact-details">
48
  <label>Name
49
    <input type="text" name="customer_name" id="customer_name" required>
50
  </label>
51
  <label>Email
52
    <input type="email" name="email_address" id="email_address">
53
  </label>
54
  <label>Phone
55
    <input type="tel" name="phone" id="phone">
56
  </label>
57
  </div>
58
  <div id="comment-box">
59
    <label>Comments
60
    <textarea name="comments" id="comments" maxlength="500"></textarea>
61
    </label>
62
  </div>
63
  <button>Submit</button>
64
</form>