Input - Google style

gistfile1.txt

<div class="single-line-input-block">
  <input required type="text">
  <span class="placeholder">
    Placeholder
  </span>
</div>

div.single-line-input-block {
    position: relative;

    input {
        border: 2px solid $very-light-pink;
        color: #495055;
        font-size: 1.1rem;
        outline: none;
        padding: 10px;

        &:valid,
        &:focus {
            border-color: #284B63;
            color: #284B63;

            + span.placeholder {
                background: $white;
                color: #284B63;
                left: 20px;
                transform: scale(0.8) translateY(-25px);
            }
        }
    }

    span.placeholder {
        @include transition(all 0.2s);
        align-items: center;
        color: $battleship-grey;
        display: flex;
        font-size: 1.1rem;
        left: 13px;
        margin: 10px 0;
        padding: 0 10px;
        position: absolute;
        pointer-events: none;
        top: 0;
        transform-origin: 0 0;
    }
}