Edit in JSFiddle

let fields = document.querySelectorAll('.fields');

fields.forEach( element => {
    let input = element.querySelector('.input');
    let highlight = element.querySelector('.highlight');
    
    input.addEventListener('keyup', e => {
        let value = input.value;
        highlight.innerHTML = value;
    });
});

   <form action="" class="form-container">
        <div class="fields">
            <input type="text" name="name"  class="input" placeholder="Digite seu nome"/>
            <div class="highlight"></div>
        </div>
    </form>

.form-container{
    width:500px;
    margin:0 auto;
}

.form-container .fields {
    position: relative;
    width: 100%;
    margin:25px auto;
}

.form-container .input {
    width:100%;
    height: 50px;
    font-size: 12px;
    line-height: 12px;
    font-family: Arial, Helvetica, sans-serif;
    border:0;
    outline: none;
    border-bottom:3px solid #000; 
}

.form-container .highlight{
    position: absolute;
    left:0;
    bottom: 0; 
    width: auto;
    max-width: 100%;
    height:0;
    overflow: hidden;
    border-top:3px solid #F00;
    font-size: 12px;
    line-height: 12px;
    font-family: Arial, Helvetica, sans-serif;
}