Q:

CSS - How to make the text entered in my input start to be displayed at top-left of the box?

I'm working in input with my html css. I would know how to make that, when I enter a text in my box, the text start to be displayed at the top-left of my box ? 
Currently it is displayed at the center of my box, here a tiny reproducible example of my work: 

/*** messages ***/ 
.messages_flow{ 
    grid-area: messages_flow; 
    width: 85%; 
    height: 85% ;
    border-radius: 10px; 
    overflow-y: auto;
    margin: auto;
    display:flex; 
    flex-direction : column; 
    align-items: end; 
    justify-content: flex-end;
    background-color: white;  
    padding-top: 1em;
    padding: 15px 10px  ; 
    /* padding-bottom: 15px;  */

}

.message_form { 
    grid-area: message_form;  
    width:  16.76em ;
   
    word-wrap: break-word;   
    /* margin-top: 5em;  */
    display:flex; 
    justify-content: center;
    align-items: center;  
}

.message_form  input[name="message"] { 
    text-align: end;  
    width:  16.76em ; 
    height: 4em;
    justify-self: start;
    margin-right: 1em;
    margin-top: 0.5em; 
} 
form, input { 
    border-radius: 10px; 
}
  <form
  class="message_form"
  onSubmit={this.send}
  >
    <input  
    name="message" 
    type="text"  />
    <input id="send" type="submit"                   value="Send" />
</form> 

Any hint would be great,
Thanks

A:

Just erase the text-align: end; from your inputs CSS.
For top (and left) alignment you would need to use a textarea element, not a regular text input.

/*** messages ***/ 
.messages_flow{ 
    grid-area: messages_flow; 
    width: 85%; 
    height: 85% ;
    border-radius: 10px; 
    overflow-y: auto;
    margin: auto;
    display:flex; 
    flex-direction : column; 
    align-items: end; 
    justify-content: flex-end;
    background-color: white;  
    padding-top: 1em;
    padding: 15px 10px  ; 
    /* padding-bottom: 15px;  */

}

.message_form { 
    grid-area: message_form;  
    width:  16.76em ;
   
    word-wrap: break-word;   
    /* margin-top: 5em;  */
    display:flex; 
    justify-content: center;
    align-items: center;  
}

.message_form  input[name="message"] { 
    width:  16.76em ; 
    height: 4em;
    margin-right: 1em;
    margin-top: 0.5em; 
} 
form, input { 
    border-radius: 10px; 
}
<form
  class="message_form"
  onSubmit={this.send}
  >
    <input  
    name="message" 
    type="text"  />
    <input id="send" type="submit"                   value="Send" />
</form>

