index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Float Label</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/>
  <link rel="stylesheet" href="dist/float-label.css"/>
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      position: relative;
      max-width: 20rem;
      background: #eee;
      margin: 2rem auto;
    }
    fieldset {
      padding: 1.5rem;
      background: white;
    }
    input, select {
      width: 100%;
      margin-bottom: .5rem;
    }
    button {
      background: #333;
      color: white;
      border: 0;
      padding: .5em 1em;
      margin-top: 1rem;
    }
    a {
      display: block;
      padding: 10px;
      position: absolute;
      z-index: -1;
      top: 1rem;
      left: 100%;
      margin-left: -65px;
      transition: all .2s;
    }
    a:hover {
      margin-left: 0;
    }
    .input-group {
      display: table;
      width: 100%;
    }
    .input-group > * {
      display: table-cell;
      width: 50%;
    }
  </style>
</head>
<body>
  <fieldset>
    <legend>Sign up</legend>

    <div class="input-group">
    <div class="has-float-label">
      <input id="first" type="text" placeholder="Name"/>
      <label for="first">First</label>
    </div>

    <div class="has-float-label">
      <input id="last" type="text" placeholder="Surname"/>
      <label for="last">Last</label>
    </div>
    </div>

    <label class="has-float-label">
      <input type="email" placeholder="email@example.com"/>
      <span>Email</span>
    </label>

    <label class="has-float-label">
      <input type="password" placeholder="••••••••"/>
      <span>Password</span>
    </label>

    <div class="input-group">
    <label class="has-float-label">
      <select>
        <option>United States</option>
        <option>Canada</option>
      </select>
      <span>Country</span>
    </label>

    <div class="has-float-label">
      <select id="state">
        <option>New York</option>
        <option>Texas</option>
      </select>
      <label for="state">State</label>
    </div>
    </div>

    <label class="has-float-label">
      <textarea placeholder="No newsletter please!"></textarea>
      <span>Notes</span>
    </label>

    <button>Sign up</button>
  </fieldset>

  <!---->
  <a href="https://github.com/tonystar/float-label-css" target="_blank">
    <img src="https://img.shields.io/github/stars/tonystar/float-label-css.svg?style=social&label=Star"/>
  </a>
</body>
</html>