<h3>Two columns form Lauyout using order property for textarea  </h3>
<form class="myForm">
  <div class="message">
    <label for="msg">Message</label>
    <textarea id="msg"></textarea>
  </div>
  <div class="contact">
    <label for="name">Name</label>
    <input type="text" id="name">

    <label for="townborn">Town you were born in</label>
    <input type="text" id="townborn">

    <label for="email">Email Address</label>
    <input type="email" id="email"> 

    <button type="submit">Submit</button>
  </div>
</form>
<h3> Reveresed layout for the above form</h3>
<form class="myForm second-form">
  <div class="message">
    <label for="msg">Message</label>
    <textarea id="msg"></textarea>
  </div>
  <div class="contact">
    <label for="name">Name</label>
    <input type="text" id="name">

    <label for="townborn">Town you were born in</label>
    <input type="text" id="townborn">

    <label for="email">Email Address</label>
    <input type="email" id="email"> 

    <button type="submit">Submit</button>
  </div>
</form>
* {
   box-sizing: border-box; 
  }
  .myForm {
    display: flex;
    background-color: beige;
    border-radius: 3px;
    padding: 1.8em;
  }
  .message {
    display: flex;
    flex-direction: column;
    order: 2;
  }
  .message > textarea {
   flex: 1; 
   min-width: 18em;
  }
  .contact {
   	flex: 1; 
    order: 1;
   	margin-right: 2em; 
  }
  .contact input {
    width: 100%;
  }
  .contact input,
  .contact button {
    padding: 1em;
    margin-bottom: 1em;
  }
  .contact button {
   background: gray;
   color: white;
   border: 0;
  }
/* custom code for second form */
.second-form .message > textarea {
   flex: 1; 
}
.second-form .message {
   	margin-right: 2em; 
    display: flex;
    flex-direction: column;
	order: default;
  }
.second-form .contact {
    order: 2;
  }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.