<form>
  <dl>
    <dt><i>required</i>Name</dt>
    <dd><input type="text" placeholder="thomas" required></dd>
  </dl>
  <dl>
    <dt>Email</dt>
    <dd><input type="email" placeholder="info@....."></dd>
  </dl>

  <dl>
    <dt></dt>
    <dd><input type="submit" value="Submit"></dd>
  </dl>
</form>
input:required {
  border-color: red;
}

input:optional {
  border-color: blue;
}

input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  padding: 15px;
  box-sizing: border-box;
}

input[type="submit"] {
  cursor: pointer;
  border: none;
  outline: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  display: block;
}

dt {
  display: table-cell;
  vertical-align: middle;
  width: 40%;
  width: 200px;
  text-align: right;
  padding: 0 16px;
}

dd {
  display: table-cell;
  vertical-align: top;
}

i {
  padding: 0 5px;
  margin-right: 10px;
  overflow: hidden;
  color: red;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.