<form action="" method="get">
  
  <p>This input has an associated label (click on the label):</p>
  <label for="name">Name:</label>
  <input name="name" id="name" type="text">
 
  <p>This input <em>doesn’t</em> have an associated label (click on the label):</p>
  <label for="something">Surname:</label>
  <input name="surname" id="surname" type="text">
 
  <p>This input is wrapped in a label (click on the label):</p>
  <label>Email:
    <input name="email" type="email">
  </label>
  
</form>
form {
  margin: 0 auto;
  max-width: 600px;
  flex: 0 0 100%;
}

input {
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid #bbb;
  color: #333;
  margin-left: 16px;
}

input[type="text"],
input[type="email"]{
  padding: 12px 16px;
}

label {
  width: 10%;
  font-weight: bold;
}

p {
  margin: 3rem 0 1rem 0;
}

External CSS

  1. https://codepen.io/tutsplus/pen/vYrpEwd.css

External JavaScript

This Pen doesn't use any external JavaScript resources.