Less HTML markup thanks to white-space

by vvv vvvv

HTML

<form>
  <label for="one">Input #1</label><input type="text" id="one" placeholder="Bla bla">
  <label for="two">Second input</label><input type="text" id="two" placeholder="Something">
  <label for="three">Input three</label><input type="text" id="three" placeholder="Hey!">
</form>

CSS

body {
  padding: 20px;
  font: 14px sans-serif;
}

label {
  display: inline-block;
  margin-top: 20px;
  padding: 3px 5px 3px 0;
  border-bottom: 1px solid #eee;
  width: 100px;
}

  label:first-of-type {
    margin-top: 0;
  }

input[type="text"] {
  padding: 3px;
  width: 200px;
  border: 1px solid #eee;
}

  input[type="text"]:hover {
      border-color: #aaa;
    }

  input[type="text"]:focus {
    border-color: DarkGoldenRod;
    outline: none;
  }

form {
  white-space: pre-line;
}

JavaScript

// white-space: pre-line

// Use it if <label> tags don't wrap <input> tags

// Note 1:
// <label> and <input> tags MUST BE in the same line and each new box line is created thanks to CSS white-space: pre-line. So there is no need to wrap each line box into a <div> or write an unordered list (<ul>).

// Note 2:
// If your <label> tags wrap inputs, just use
// label { display: block } and that's it!