title: Bootstrap - div, how to make third element in the div to the far right without breaking responsiveness
body: <p>I have a button:</p>
  
  <pre><code>                &lt;div class="col-sm-12 col-xs-12"&gt;
                      &lt;a href="#"&gt;
                          &lt;div class="homeButtons" style="background-color:#4b4b4b" ng-click="showRequestForm()" style="text-align:center; padding-top:2em; display:inline-block;"&gt;
                              &lt;div class="inline-blockClass"&gt;&lt;img src="/images/search-icon.png" width="50" height="50"&gt;&lt;/img&gt;
                              &lt;/div&gt;
                              &lt;div class="inline-blockClass" style="padding-left:2em"&gt;&lt;span class="genericTextHomeButtons"&gt;SEARCH&lt;/span&gt;&lt;/div&gt;
                              &lt;div class="inline-blockClass col-md-offset-8"&gt; &lt;img src="/images/arrow-right.png" width="50" height="50"&gt;&lt;/img&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>It looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/L0jyv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L0jyv.png" alt="enter image description here"></a></p>
  
  <p>I am trying to get the arrow to the far right of the parent container. When i do padding-left: 5em, it breaks responsiveness. I have tried offset it does not work. I have also tried position:relative; float:right which works but breaks responsiveness.</p>
  
  <p>How can I achieve this, thanks</p>
  
  <p>Edit:</p>
  
  <p>Using pull-right has responsive issues:</p>
  
  <p><a href="https://i.stack.imgur.com/Hpa1H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hpa1H.png" alt="enter image description here"></a></p>