1
<!doctype html>
2
<title>Example</title>
3
<style>
4
  .wrapper {
5
    background-color: whitesmoke;
6
    list-style-type: none;
7
    padding: 0;
8
    border-radius: 3px;
9
  }
10
  .form-row {
11
    display: flex;
12
    justify-content: flex-end;
13
    padding: .5em;
14
  }
15
  .form-row > label {
16
    padding: .5em 1em .5em 0;
17
    flex: 1;
18
  }
19
  .form-row > input {
20
    flex: 2;
21
  }
22
  .form-row > input,
23
  .form-row > button {
24
    padding: .5em;
25
  }
26
  .form-row > button {
27
   background: gray;
28
   color: white;
29
   border: 0;
30
  }
31
</style>
32
<form>
33
  <ul class="wrapper">
34
    <li class="form-row">
35
      <label for="name">Name</label>
36
      <input type="text" id="name">
37
    </li>
38
    <li class="form-row">
39
      <label for="townborn">Town you were born in</label>
40
      <input type="text" id="townborn">
41
    </li>
42
    <li class="form-row">
43
      <label for="email">Email Address</label>
44
      <input type="email" id="email">
45
    </li>
46
    <li class="form-row">
47
      <button type="submit">Submit</button>
48
    </li>
49
  </ul>
50
</form>