title: bootstrap 4 text on right is going left
body: <p>I am trying to have an image and text on the left, using bootstrap 4, and the text &quot;stuff on right&quot; on the right hand side. But currently the text &quot;stuff on right&quot; is next to the image and text on the left:</p>
  <pre><code>&lt;main role=&quot;main&quot; class=&quot;container&quot;&gt;
     &lt;div class=&quot;d-flex  p-3 my-3 text-white-50 rounded box-shadow&quot; style=&quot;background:#d5d7f6;&quot;&gt;
        &lt;img class=&quot;mr-3&quot; src=&quot;http://localhost/MVC/app/views/images/bob2.jpg&quot; alt=&quot;myTitle&quot; width=&quot;48&quot; height=&quot;48&quot;&gt;
      
        &lt;div class=&quot;lh-100&quot;&gt;
           &lt;h6 class=&quot;mb-0 text-white lh-100&quot;&gt;main title&lt;/h6&gt;
           &lt;small&gt;a sub heading&lt;/small&gt;
        &lt;/div&gt;
      
        &lt;div class=&quot;text-right&quot;&gt;
           &lt;h3&gt;stuff on right&lt;/h3&gt;
        &lt;/div&gt;
      
     &lt;/div&gt;      
  &lt;/main&gt;
  </code></pre>