1
<!doctype html>
2
<title>Example</title>
3
<style>
4
  .myForm {
5
    display: grid;
6
    grid-template-columns: auto 1fr 1fr;
7
    grid-auto-flow: row dense;
8
    grid-gap: .8em;
9
    background: #eee;
10
    padding: 1.2em;
11
  }
12
  .myForm > label  {
13
    grid-column: 1;
14
    grid-row: auto;
15
  }
16
  .myForm > input,
17
  .myForm > button {
18
    grid-column: 2;
19
    grid-row: auto;
20
    padding: 1em;
21
    border: none;
22
  }
23
  .myForm textarea {
24
   min-height: calc(100% - 2em);
25
   width: 100%;
26
   border: none;
27
  }
28
  #comment-box {
29
   grid-column: 3;
30
   grid-row: span 3;
31
  }
32
  .myForm > button {
33
   grid-column: 2 / 4;
34
  }
35
</style>
36
<form class="myForm">
37
  <label for="customer_name">Name </label>
38
  <input type="text" name="customer_name" id="customer_name" required>
39
  <label for="email_address">Email </label>
40
  <input type="email" name="email_address" id="email_address">
41
  <label for="phone">Phone </label>
42
  <input type="tel" name="phone" id="phone">
43
  <div id="comment-box">
44
    <label for="comments">Comments</label>
45
    <textarea name="comments" id="comments" maxlength="500"></textarea>
46
  </div>
47
  <button>Submit</button>
48
</form>