Formular 2 Spaltig

Flexbox

by marusti

HTML

<div class="flexcontainer">
  <div class="left">
    <div class="left1">
      left1
    </div>
    <div class="left2">
      left2
    </div>
    <div class="left3">
      left3
    </div>
  </div>
  <div class="right">
    right
  </div>
  <div class="button">
    <button type="submit">Send</button>
    <button type="reset">Reset</button>
  </div>
</div>

CSS

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }
    
    .flexcontainer {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: column;
      flex-direction: column;
    }
    
    .left > div,
    .right {
      padding: 1em;
      background: #fff;
      border: 2px solid #eee
    }
    
    .left > div {
      margin-bottom: 1em
    }
    
    .button {
      margin-top: 1em;
      /* text-align: center*/
    }
    
    button {
      padding: 1em;
      background: #fff;
      border: 2px solid #eee
    }
    
    button:last-child {
      margin-left: 1em
    }
    
    @media only screen and (min-width: 768px) {
      .flexcontainer {
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
      }
      .left,
      .right {
        flex: 1
      }
      .right {
        margin-left: 1em
      }
      .left > div:last-child {
        margin-bottom: 0
      }
      .button {
        flex: 1 100%
      }
    }