​x
 
1
<!doctype html>
2
<title>Example</title>
3
<style>
4
  * {
5
   box-sizing: border-box;
6
  }
7
  .myForm {
8
    display: flex;
9
    background-color: beige;
10
    border-radius: 3px;
11
    padding: 1.8em;
12
  }
13
  .message {
14
    display: flex;
15
    flex-direction: column;
16
    order: 2;
17
  }
18
  .message > textarea {
19
   flex: 1;
20
   min-width: 18em;
21
  }
22
  .contact {
23
    flex: 1;
24
    order: 1;
25
    margin-right: 2em;
26
  }
27
  .contact input {
28
    width: 100%;
29
  }
30
  .contact input,
31
  .contact button {
32
    padding: 1em;
33
    margin-bottom: 1em;
34
  }
35
  .contact button {
36
   background: gray;
37
   color: white;
38
   border: 0;
39
  }
40
</style>
41
<form class="myForm">
42
  <div class="message">
43
    <label for="msg">Message</label>
44
    <textarea id="msg"></textarea>
45
  </div>
46
  <div class="contact">
47
    <label for="name">Name</label>
48
    <input type="text" id="name">
49
​
50
    <label for="townborn">Town you were born in</label>
51
    <input type="text" id="townborn">
52
​
53
    <label for="email">Email Address</label>
54
    <input type="email" id="email">
55
​
56
    <button type="submit">Submit</button>
57
  </div>
58
</form>