<form>
    <div>
      <label for="email">Email</label>
      <input required type="email" id="email" name="email"/>
    </div>
    <div>
      <button>Submit</button>
    </div>
</form>

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap");

*,
::after,
::before {
  border: 0 solid #e2e8f0;
}

html {
  font-size: 18px;
  font-family: "Source Sans Pro", sans-serif;
}


form {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  margin: 1rem auto;
}

div {
  margin-top: 1rem;
}

div > label {
  display: block;
}

input {
  padding: 0.8em 0.75em 0.8em 0.5em;
  margin-top: 0.25rem;
  border-width: 1px;
  border-radius: 0.25rem;
  font-size: 90%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  font-family: "Source Sans Pro", sans-serif;

  &:focus {
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
  }
}


button {
  padding: 1em 1.5em;
  font-size: 90%;
  border-radius: 0.25rem;
  cursor: pointer;
}