Simple Flexbox Example

by GiorgosK

HTML

<form class="flex-container">
  <div class="flex left">
    <input type="text" placeholder="Your Name*"><br>
    <input type="text" placeholder="Your E-Mail Address*"><br>
    <textarea placeholder="Subject"></textarea>
  </div>
  <div class="flex right">
    <textarea placeholder="Type your message here..." rows="7"></textarea>
  </div>
</form>

CSS

.flex {
  padding: 10px;  
}
.flex input,
.flex textarea {
  width: 100%;
}
@media (max-width: 400px) {
  .flex input,
  .flex textarea {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
@media (min-width: 400px) {
  .flex-container {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
   }

  .flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction:column;

    padding: 10px;  
  }
  .left {
    width: 40%;
   }
  .right {
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    width: 60%;               /* For old syntax, otherwise collapses. */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  }
}