.floating {
    position: relative;
    margin-bottom: 1rem;
}

.floating > .input {
    height: 58px;
    padding: 1rem .75rem;
}

.floating > .input::placeholder {
    color: transparent;
}

.floating > label {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    padding: 1rem .75rem;

    pointer-events: none;

    color: #6c757d;

    transform-origin: 0 0;

    transition: all .15s ease;
}

.floating > .input:focus,
.floating > .input:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}

.floating > .input:focus ~ label,
.floating > .input:not(:placeholder-shown) ~ label {
    transform:
        scale(.85)
        translateY(-.5rem)
        translateX(.15rem);

    opacity: .75;
}