​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
    margin-right: 2em;
15
    display: flex;
16
    flex-direction: column;
17
  }
18
  .message > textarea {
19
   flex: 1;
20
   min-width: 18em;
21
  }
22
  .contact {
23
    flex: 1;
24
  }
25
  .contact input {
26
    width: 100%;
27
  }
28
  .contact input,
29
  .contact button {
30
    padding: 1em;
31
    margin-bottom: 1em;
32
  }
33
  .contact button {
34
   background: gray;
35
   color: white;
36
   border: 0;
37
  }
38
</style>
39
<form class="myForm">
40
  <div class="message">
41
    <label for="msg">Message</label>
42
    <textarea id="msg"></textarea>
43
  </div>
44
  <div class="contact">
45
    <label for="name">Name</label>
46
    <input type="text" id="name">
47
​
48
    <label for="townborn">Town you were born in</label>
49
    <input type="text" id="townborn">
50
​
51
    <label for="email">Email Address</label>
52
    <input type="email" id="email">
53
​
54
    <button type="submit">Submit</button>
55
  </div>
56
</form>