How to target ::before pseudo element with :not(:focus):valid?

Question

I need to use just CSS for this so please bear with me.

I have this structure:

<div class="form-element">
 <input type="text">
</div>

The CSS for showing the placeholders, and animating them when user clicks into the input is:

.form-element
    &:before
        content: "test"
        top: 0
    &:focus-within
        &:before
            top: 5px

So, now I need to use :not(:focus):valid for the inputs, so the labels would stay at top: 5px when user insert content into the input but click outside of the input.

Is this possible to do? I tried something like this but it doesn't work:

.form-element
    &:before
        content: "test"
        top: 0
    &:focus-within
        &:before
            top: 5px
    input
        &:not(:focus):valid
            ~ &:before
                    top: 10px
                    left: 20px
                    font-size: 0.9em
                    font-weight: lighter 

Here is the current version I'm at: https://codepen.io/cungalunga/pen/zWZwwY, so what I need now, I want the placeholder to stay at the top when there is content in the input and when user clicks outside of the .form-element itself.