title: Column alignment (within rows) issue with bootstrap 4
body: <p>I am using Bootstrap 4.6 to create a responsive page - and I am having problems getting the columns withing rows to align as I want.</p>
  <p>I want my page to look something like this:</p>
  <pre><code>                                 Topics  |  Gallery One  Gallery Two  Gallery Three
  
  Most Popular Photos                                        * Most Popular  o Latest
  </code></pre>
  <p>However, I have the following issues:</p>
  <ol>
  <li>The form is displayed on the same row (visually), as the row containing the &quot;Topics ...&quot; line</li>
  <li>The form is not floated right within it's own row</li>
  </ol>
  <p>Here is my code:</p>
  <h3>HTML</h3>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
  
    &lt;div class=&quot;row float-right&quot;&gt;
      &lt;ul class=&quot;theme&quot;&gt;Topics
        &lt;li&gt;Gallery One&lt;/li&gt;
        &lt;li&gt;Gallery Two&lt;/li&gt;
        &lt;li&gt;Gallery Three&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div class=&quot;row&quot;&gt;
      &lt;div&gt;
        &lt;h2 class=&quot;font-weight-light text-center text-lg-left mt-4 mb-0&quot;&gt;Most Popular Photos&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div class=&quot;form-check form-check-inline&quot;&gt;
          &lt;input class=&quot;form-check-input&quot; type=&quot;radio&quot; name=&quot;inlineRadioOptions&quot; id=&quot;inlineRadio1&quot; value=&quot;option1&quot;&gt;
          &lt;label class=&quot;form-check-label&quot; for=&quot;inlineRadio1&quot;&gt;Most Popular&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-check form-check-inline&quot;&gt;
          &lt;input class=&quot;form-check-input&quot; type=&quot;radio&quot; name=&quot;inlineRadioOptions&quot; id=&quot;inlineRadio2&quot; value=&quot;option2&quot;&gt;
          &lt;label class=&quot;form-check-label&quot; for=&quot;inlineRadio2&quot;&gt;Latest&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-check form-check-inline&quot;&gt;
          &lt;button type=&quot;submit&quot; class=&quot;btn btn-sm btn-success&quot; id=&quot;submit&quot; name=&quot;submit&quot;/&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;  
    &lt;/div&gt;
  
    &lt;hr class=&quot;mt-2 mb-5&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <h3>CSS</h3>
  <pre><code>/* theme */
    ul.theme {
      padding: 5px 0px;
    }
    
    ul.theme li &gt; a {
      color: #CACACA;
      text-decoration: none;
    }
    
    ul.theme li {
      display: inline;
      padding: 0px 4px;
    }
    
    ul.theme li a:hover {
      color: #275d9c;
    }
    
    ul.theme li:first-child { 
        border-left: 1px solid #CACACA;
        padding: 0px 4px;
    }
    
    ul.theme li.highlight {
      border-bottom: solid 1px red;
    }
  </code></pre>
  <p>How do I fix these issues?</p>