title: css form elements alignment issue
body: <p>I am creating a form using css and having issues with alignment for certain fields. This layout consists of multiple columns
  The issues are as follows</p>
  <ol>
  <li>The two checkboxes are appearing next to each other , instead of one below the other</li>
  <li>The second column should appear close to the first column, not able to remove the whitespace, should I set the col width for each column ?</li>
  <li>the html code seems cumbersome, since each column needs to contain the fields based on the required fields, not sure if I am using correct approach , new to css</li>
  </ol>
  <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>  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  h1 {
    text-align: center;
  }
  
  .container1 {
    display: flex;
    flex-direction: row;
    margin: 10px 50px 10px
  }
  
  .container2 {
    display: flex;
    justify-content: center;
  }
  
  .col1 {
    flex: 1
  }
  
  .col2 {
    flex: 1;
    align-items: start
  }
  
  .button-basic {
    border: 1px solid black;
    border-radius: 5px;
    margin: 10px;
    padding: 10px</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;h1&gt; Employee information &lt;/h1&gt;
    &lt;form&gt;
      &lt;div class="container1"&gt;
        &lt;div class="col1"&gt;
          &lt;p&gt; Employee id:&lt;/p&gt;
          &lt;p&gt; Employee Type:&lt;/p&gt;
          &lt;p&gt; Employee Status: &lt;/p&gt;
          &lt;p&gt; Promotion Flag:&lt;/p&gt;
          &lt;p&gt; Insurance Flag:&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col2"&gt;
          &lt;p id="employee-id"&gt; 12345 &lt;/p&gt;
          &lt;p id="employee-type"&gt; HR &lt;/p&gt;
          &lt;p id="employee-status"&gt; Active &lt;/p&gt;
          &lt;input type="checkbox" id="promotion-flag" name="promotion-flag"&gt;
          &lt;input type="checkbox" id="insurance-flag" name="insurance-flag"&gt;
        &lt;/div&gt;
        &lt;div class="col1"&gt;
          &lt;p&gt; Employee First Name: &lt;/p&gt;
          &lt;p&gt; Description: &lt;/p&gt;
          &lt;p&gt; Description: &lt;/p&gt;
          &lt;p&gt; Promotion comments: &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col2"&gt;
          &lt;p id="employee-fname"&gt; John &lt;/p&gt;
          &lt;p id="employee-type-desc"&gt; HR employee &lt;/p&gt;
          &lt;p id="employee-status-desc"&gt; Active employee &lt;/p&gt;
          &lt;input type="text" id="promotion-reason" name="promotion-reason"&gt;
        &lt;/div&gt;
        &lt;div class="col1"&gt;
          &lt;p&gt; Employee Last Name: &lt;/p&gt;
          &lt;p&gt; Employee Start Date: &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col2"&gt;
          &lt;p id="employee-lname"&gt; Smith &lt;/p&gt;
          &lt;p id="employee-start-date"&gt; 01/01/2020 &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="container2"&gt;
        &lt;input class="button-basic" type="submit" value="Search"&gt;
        &lt;input class="button-basic" type="submit" value="Save"&gt;
      &lt;/div&gt;
    &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>