<form>
    <div class="field">
        <input type="text" name="name" placeholder="Name" />
        <label>Name</label>
    </div>
    <div class="field">
        <input type="text" name="email" placeholder="Email Address" />
        <label>Email Address</label>
    </div>
    <div class="field">
        <input type="text" name="email" placeholder="Phone Number" />
        <label>Phone Number</label>
    </div>
</form>

$font-size: 16px;
body { padding: 2rem; }
.field {
    position: relative;
    margin-bottom: $font-size * 1.5;
    font-size: $font-size;
    label { 
        position: absolute;
        background: #ffffff;
        font-size: $font-size * 0.75;
        left: $font-size + ($font-size / 8) - ($font-size / 4);
        padding: 0 $font-size / 4;
        z-index: 1;
        display: block;
        transition: all 0.3s ease;
        pointer-events: none;
        opacity: 0;
        top: $font-size;
    }
    input[type=text],
    input[type=email] {
        border: solid $font-size/8 grey;
        font-size: $font-size;
        border-radius: $font-size / 4;
        padding: $font-size/1.5 $font-size;
        outline: none;
        transition: all 0.3s ease;
        width: 500px;
    }
    input[type=text],
    input[type=email] {
        &:focus {
            border-color: #000000;
            &:-ms-input-placeholder { color: transparent; }
            &::placeholder { color: transparent; }
            & + label {
                top: -$font-size/2.7; 
                opacity: 1;   
            }
        }
        &:not(:placeholder-shown) {
            & + label {
                top: -$font-size/2.7; 
                opacity: 1;  
            }
        }
    }
}