form {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-areas: "author comments" "... submit";
  margin: 0 auto;
  /* To see the outline of the form */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em; }

label {
  display: inline-block;
  text-align: right; }

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%; }

input, textarea, select, button {
  width: 150px;
  margin: 0;
  -webkit-box-sizing: border-box;
  /* For legacy WebKit based browsers */
  -moz-box-sizing: border-box;
  /* For legacy (Firefox <29) Gecko based browsers */
  box-sizing: border-box; }

textarea {
  vertical-align: top; }

button:hover,
button:focus {
  outline: none;
  background: #000;
  color: #FFF; }

.author {
  grid-area: author; }

.comments {
  grid-area: comments; }

.submit {
  grid-area: submit; }

label {
  /* To make sure that all labels have the same size and are properly aligned */
  display: inline-block;
  width: 220px;
  text-align: right; }

#comm > label {
  width: auto;
  text-align: right; }

input, textarea {
  /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
  font: 1em sans-serif;
  /* To give the same size to all text fields */
  width: 300px;
  box-sizing: border-box;
  /* To harmonize the look & feel of text field border */
  border: 1px solid #999; }

input:focus, textarea:focus {
  /* To give a little highlight on active elements */
  border-color: #000; }

textarea {
  /* To properly align multiline text fields with their labels */
  vertical-align: top;
  /* To give enough room to type some text */
  height: 7em; }

.button {
  /* To position the buttons to the same position of the text fields */
  padding-left: 90px;
  /* same size as the label elements */ }

button {
  /* This extra margin represent roughly the same space as the space
     between the labels and their text fields */
  margin-left: .5em; }

input:invalid {
  border: 2px dashed red; }

input:valid {
  border: 2px solid black; }