title: Styling a form with two columns
body: <p>I am trying to re-create this page below</p>
  
  <p><a href="https://i.stack.imgur.com/1jqab.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1jqab.jpg" alt="Mock Page"></a></p>
  
  <p>I am pretty familiar with bootstrap 4's grid system but I struggle very much with forms. Where the form is on the page consists of a row with two col-6. I am working on the first column but I cannot seem to keep everything inline using flexbox classes. Can someone give me an idea of how to get this similar format?</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-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"&gt;
    
    &lt;div class="container"&gt;
      &lt;div class="d-flex flex-row"&gt;
     &lt;div class="col-6 d-flex"&gt;&lt;!--left side --&gt;
      &lt;form class="form-inline"&gt;
       &lt;div class="form-group"&gt;
        &lt;label for="fname"&gt;First Name:&lt;/label&gt;
        &lt;input type="text" id="fname" class="form-control ml-5"&gt;
       &lt;/div&gt;
       &lt;div class="form-group"&gt;
        &lt;label for="lname"&gt;Last Name:&lt;/label&gt;
        &lt;input type="text" id="lname" class="form-control ml-5"&gt;
       &lt;/div&gt;
       &lt;div class="form-inline"&gt;
        &lt;label for="month/year"&gt;Date of Birth:&lt;/label&gt;
        &lt;select name="Month" class="custom-select" class="month/year"&gt;
           &lt;option value="january"&gt;January&lt;/option&gt;
           &lt;option value="february"&gt;February&lt;/option&gt;
           &lt;option value="march"&gt;March&lt;/option&gt;
           &lt;option value="april"&gt;April&lt;/option&gt;
           &lt;option value="may"&gt;May&lt;/option&gt;
           &lt;option value="june"&gt;June&lt;/option&gt;
           &lt;option value="july"&gt;July&lt;/option&gt;
           &lt;option value="august"&gt;August&lt;/option&gt;
           &lt;option value="september"&gt;September&lt;/option&gt;
           &lt;option value="october"&gt;October&lt;/option&gt;
           &lt;option value="november"&gt;November&lt;/option&gt;
           &lt;option value="december"&gt;December&lt;/option&gt;
        &lt;/select&gt;
        &lt;!--dates in this select below --&gt;
        &lt;select name="Year" class="custom-select" class="month/year"&gt;
         &lt;option value="2018"&gt;2018&lt;/option&gt;
         &lt;option value="2017"&gt;2017&lt;/option&gt; 
        &lt;/select&gt;
       &lt;/div&gt;
       &lt;div class="form-group mt-3"&gt;
        &lt;label&gt;Gender:&lt;/label&gt;
        &lt;div&gt;
         &lt;label class="radio-button-container ml-2"&gt;Male
          &lt;input type="radio" name="radio"&gt;
          &lt;span class="black-dot"&gt;&lt;/span&gt;
         &lt;/label&gt;
        &lt;/div&gt;
        &lt;div&gt;
         &lt;label class="radio-button-container ml-2"&gt;Female
          &lt;input type="radio" name="radio"&gt;
          &lt;span class="black-dot"&gt;&lt;/span&gt;
         &lt;/label&gt;
        &lt;/div&gt;
       &lt;/div&gt;
       &lt;div class="form-group"&gt;
         &lt;label for="month/year"&gt;Field of Study:&lt;/label&gt;
         &lt;select name="Month" class="custom-select" class="month/year"&gt;
            &lt;option value=""&gt;&lt;/option&gt; 
           &lt;/select&gt;
       &lt;/div&gt;
      &lt;/form&gt; 
     &lt;/div&gt;
     &lt;div class="col-6"&gt;&lt;/div&gt;&lt;!--right side --&gt;
    &lt;/div&gt;&lt;!-- form for teacher/student--&gt;
     &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The snippet would be that left side in the first column where "first name" starts. If I can understand how to get that type of alignment then I can figure out the other column. Can this be done using bootstrap classes?</p>