title: CSS - How to make the text entered in my input start to be displayed at top-left of the box?
body: <p>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 ? </p>
  
  <p>Currently it is displayed at the center of my box, here a tiny reproducible example of my work: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*** 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; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;form
    class="message_form"
    onSubmit={this.send}
    &gt;
      &lt;input  
      name="message" 
      type="text"  /&gt;
      &lt;input id="send" type="submit"                   value="Send" /&gt;
  &lt;/form&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>Any hint would be great,
  Thanks</p>