title: Bootstrap 4 - need to have 2 columns with horizontal / inline form
body: <p>Just when i thought I understood bootstrap,  it is not working for me :( </p>
  
  <p>I need to have 2 columns in which each has a Question with a small text box to enter a number.</p>
  
  <p>Example of what I want to have</p>
  
  <blockquote>
    <p>__  represents a small text box below   </p>
  </blockquote>
  
  <pre><code>_____________________________________________________________________________________________
  Group 1                                                     |  Group 2    
  1. Are you Prone to Infection, colds, coughs, or flu? ___   | 1. What is your weight ____                                                | 2. adfafafa 
  2. Do you have inflammation, Heat spots ? __                |   
  </code></pre>
  
  <p>I seem to be struggling with the horizontal or inline form as they are wrapping or too far or too close etc..</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="border:1px solid black;"&gt;
          &lt;div class="form-inline"&gt;
              &lt;label&gt;1. Are you Prone to Infection, colds, coughs, or flu? &lt;/label&gt;
              &lt;input id="group1A" [(ngModel)]="group1A" name="group1A" style="width: 5px;" type="text" class="form-control" placeholder=""&gt;
              &lt;br&gt;
              &lt;label for="group1B"&gt;Do you have inflammation, Heat spots ? &lt;/label&gt;
              &lt;input id="group1B" [(ngModel)]="group1B" name="group1B" type="text" class="form-control" placeholder=""&gt;
  
              &lt;label for="group1C"&gt;Do you have specific pain (printed form - list on Back)&lt;/label&gt;
              &lt;input id="group1C" [(ngModel)]="group1C" name="group1C" type="text" class="form-control" placeholder=""&gt;
  
              &lt;label for="group1D"&gt;Do you have swelling?&lt;/label&gt;
              &lt;input id="group1D" [(ngModel)]="group1D" name="group1D" type="text" class="form-control" placeholder=""&gt;
  
              &lt;label for="group1E"&gt;Do you have pus, open sores, skin problems, mucus formation?&lt;/label&gt;
              &lt;input id="group1E" [(ngModel)]="group1E" name="group1E" type="text" class="form-control" placeholder=""&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="border:1px solid black;"&gt;
          &lt;div class="form-inline"&gt;
          ......
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>