title: Bootstrap 4 form-group with two pairs of labels and inputs per row
body: <p><a href="https://codepen.io/tmrczk/pen/yvppZE" rel="nofollow noreferrer">Codepen here</a>.</p>
  
  <p>The first form has two pairs of labels &amp; elements laid out on the same row.</p>
  
  <p>What I would like to do is to nest each pair of <code>&lt;label&gt;</code> and <code>&lt;div&gt;</code> in their own containers: <code>div.myFormColumnLeft</code> and <code>div.myFormColumnRight</code>.</p>
  
  <p>The problem is that labels and elements in <strong>FORM2</strong> are no longer on the same line.</p>
  
  <p><strong>QUESTION</strong>. Is there a way to make <strong>FORM2</strong> look exactly like <strong>FORM1</strong> with a slightly different markup?</p>