title: Align divs to right margin while keeping checkboxes vertically aligned
body: <p>I'm using Bootstrap 4 to style a form in HTML+CSS.
  I have six checkboxes with label that on certain media sizes should be display as two rows of three columns. Checkboxes on each column should be aligned. Also, the longest text on any row from the right column, should be right-aligned with the rest of the form. So far, I can only manage one of those things. So, how do I go from this:</p>
  
  <p><a href="https://i.stack.imgur.com/mElOr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mElOr.png" alt="checkbox aligned, not right aligned"></a></p>
  
  <p>Or this:</p>
  
  <p><a href="https://i.stack.imgur.com/6WiFO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6WiFO.png" alt="checkbox not aligned, right aligned"></a></p>
  
  <p>To this (image edited):</p>
  
  <p><a href="https://i.stack.imgur.com/HaT30.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HaT30.png" alt="checkbox aligned, right aligned"></a></p>
  
  <p>Below is the HTML code I'm using for the first example, with the checkboxes aligned (it's embedded within other divs but they should not have any role in this issue).<br>
  FYI, I'm adding a bit of styling with the following custom styles (included in survey01.css):</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-css lang-css prettyprint-override"><code>.form-inline&gt;div&gt;label {
    white-space: nowrap;
  }
  
  @media (max-width: 767px) {
    #nature-label {
      margin-bottom: 0;
    }
  }
  
  @media (max-width: 1199px) {
    #nature-label {
      margin-bottom: 0;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;!-- IE displays content in highest supported mode --&gt;
    &lt;title&gt;Do you know what proteins are?&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;!-- width as in viewport; zoom=100% --&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" type="text/css" media="screen" href="survey01.css" /&gt;
    &lt;!-- optimize for screens --&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-12"&gt;
          &lt;h1 id="title" class="display-4 text-center"&gt;Test title&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-12"&gt;
          &lt;p id="description" class="text-center"&gt;Test subtitle.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="jumbotron"&gt;
        &lt;form id="survey-form"&gt;
          &lt;div class="form-group row m-0"&gt;
            &lt;div class="container-fluid p-0"&gt;
              &lt;div class="form-row"&gt;
                &lt;div class="form-group form-group-md col-md-5 col-lg-6 mb-2"&gt;
                  &lt;!-- @media modifies mb-2 --&gt;
                  &lt;div class="row m-0"&gt;
                    &lt;label for="nature" id="nature-label" class="pr-2 pl-0"&gt;Do you think proteins are a natural or synthetic product?&lt;/label&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-inline justify-content-between align-items-start col-md-7 col-lg-6 mb-3"&gt;
                  &lt;div class="d-flex justify-content-around align-items-start col-12 col-sm-auto pr-0"&gt;
                    &lt;label for="nature1"&gt;
                                              &lt;input type="radio" id="nature1" name="nature" value="natural" class="mr-1"&gt;Natural
                                          &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="d-flex justify-content-around align-items-start col-12 col-sm-auto pr-0"&gt;
                    &lt;label for="nature2"&gt;
                                              &lt;input type="radio" id="nature2" name="nature" value="synthetic" class="mr-1"&gt;Synthetic
                                          &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="d-flex justify-content-around align-items-start col-12 col-sm-auto pr-0"&gt;
                    &lt;label for="nature3"&gt;
                                              &lt;input type="radio" id="nature3" name="nature" value="both" class="mr-1"&gt;Both
                                          &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="d-flex justify-content-around align-items-start col-12 col-sm-auto pr-0"&gt;
                    &lt;label for="nature4"&gt;
                                              &lt;input type="radio" id="nature4" name="nature" value="dontknow" class="mr-1"&gt;Don't know
                                          &lt;/label&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group row m-0"&gt;
            &lt;div class="container-fluid p-0"&gt;
              &lt;div class="form-row"&gt;
                &lt;div class="form-group form-group-md col-md-4 col-lg-6 col-xl-4 mb-2"&gt;
                  &lt;!-- @media modifies mb-2 --&gt;
                  &lt;div class="row m-0"&gt;
                    &lt;label for="identify" id="identify-label" class="pr-2 pl-0"&gt;Which of the following qualify as 'proteins'?&lt;/label&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-inline justify-content-between align-items-start col-md-8 col-lg-6 col-xl-8 mb-3"&gt;
                  &lt;div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0"&gt;
                    &lt;label for="identify1"&gt;
                                              &lt;input type="checkbox" id="identify1" name="identify" value="meat" class="mr-1"&gt;Meat
                                          &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0"&gt;
                    &lt;label for="identify2"&gt;
                                              &lt;input type="checkbox" id="identify2" name="identify" value="arginine" class="mr-1"&gt;Arginine
                                          &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0"&gt;
                    &lt;label for="identify3"&gt;
                                              &lt;input type="checkbox" id="identify3" name="identify" value="haemoglobin" class="mr-1"&gt;H&amp;#230;moglobin
                                          &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0"&gt;
                    &lt;label for="identify4"&gt;
                                              &lt;input type="checkbox" id="identify4" name="identify" value="bar" class="mr-1"&gt;Protein bar
                                          &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0"&gt;
                    &lt;label for="identify5"&gt;
                                              &lt;input type="checkbox" id="identify5" name="identify" value="egg" class="mr-1"&gt;Egg
                                          &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="d-flex justify-content-center justify-content-sm-start align-items-end col-12 col-sm-4 col-xl-auto pr-0"&gt;
                    &lt;label for="identify6"&gt;
                                              &lt;input type="checkbox" id="identify6" name="identify" value="albumin" class="mr-1"&gt;Albumin
                                          &lt;/label&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>