How to hide the input title when filled in the form using CSS

Question

<div class="content">
   <span class="title" for="input_example">Título do campo</span>
   <div class="form-content">
       <input type="text" id="input_example" name="input_example">
   </div>
</div>

Is there any way to do CSS with which the .title {} become like display:none, if the text input has the value filled in?

I tried, but I could only do it when the div stays after the input, I would like to do this with it as it is, it is possible?

Fiddle Example reversed

Answer 1

Basically, you can do this with the CSS Flex Box feature by giving a

flex-Direction: column-Reverse;

HTML

<div class="container column-reverse">
   <input type="text" placeholder="teste" class="item">
   <div class="item">
     título
   </div>    
</div>

 input[type="text"] ~ div {
                display: flex;
                flex-direction: column-reverse;
            }

            input[type="text"]:not(:placeholder-shown) ~ div {
                opacity: 0;
            }
            
.column-reverse {
    flex-direction: column-reverse;
}
.container {
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    border: 1px solid #ccc;
}
.item {
    /* O flex: 1; é necessário para que cada item se expanda ocupando o tamanho máximo do container. */
    flex: 1;
    margin: 5px;
    font-size: 1.5em;
}

https://codepen.io/lucasbpereira/pen/rNjdqzX