#username-container {
    position: relative;
}

.end-element {
    visibility: hidden;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 1.5em;
    margin-right: 0.5em;
}

.end-element ~ input {
    padding-right: 2.5em;
}

#username-container.valid .end-element.valid {
    visibility: visible;
}

#username-container.invalid .end-element.invalid {
    visibility: visible;
}

#username-container.loading .end-element.loading {
    visibility: visible;
}

.end-element.valid {
    color: #00c973;
}

.end-element.invalid {
    color: #ff5436;
}