body {
    background: #333;
    font-family: sans-serif;
    padding: 20px;
}

form {
    max-width: 400px;
    margin: 0 auto;
}

form>div {
    position: relative;
    background: white; 
    border-bottom: 1px solid #ccc;
}

form>div>label {
    opacity: 0.3;
    font-weight: bold;
    position: absolute;
    top: 40%;
    left: 50px;
}

form>div>input {
    width: 100%;
    border: 0;
    padding: 20px 20px 20px 50px;
}

form>div>input:focus {
    outline: 0;
    background: rgb(231, 231, 231);
}

/* select the first label element (+) after the input with focus */
form>div>input:focus+label
{
    opacity: 0;
}

form>div>input:valid+label {
    opacity: 0;
}

form>div>input:valid {
    background-color: rgb(194, 255, 214);
}

.checkmark::after {
    content: "";
    display: inline; 
    position: absolute; 
    right: 0;
    width: 35px;
    color: green;
    top: 30%;
    font-weight: bold;
}

form>div>input:valid~span::after {
    content: "✓";
}

form>div>input:invalid:not(:placeholder-shown) {
    background: pink;
}

form>div .errorMessage {
    padding: 0 30px 0 50px; 
    color: #999;
    max-height: 0;
    overflow: hidden;
    transition: 0.25s;
    color: red; 
    font-style: italic;
}

form>div>input:invalid:not(:placeholder-shown)~.errorMessage {
    max-height: 250px;
    padding: 20px 20px 20px 50px;
}

form input[type="submit"] {
    display: block; 
    width: 100%; 
    margin: 20px 0;
    background: #d40040;
    color: white; 
    border: 0;
    padding: 20px;
    font-size: 1.2rem;
}