Icon only buttons not working with "ui-btn-left" or "ui-btn-right" css class

Icon only buttons not working with "ui-btn-left" or "ui-btn-right" css class

What I get is:



What I was hoping for is (but with buttons on right side and on same line, like above picture):



Here's my code (I am using a ThemeRoller theme, without modification).  I am using jquery.mobile-1.2.0.

<div data-theme="a" data-role="header">
      <div class="ui-btn-left" data-role="controlgroup" data-type="horizontal" data-mini="true">
             <a href="#" data-role="button" data-rel="back" data-icon="arrow-l" data-iconpos="notext">back</a>
      </div>
      <h3>
           Test
      </h3>
      <div class="ui-btn-right" data-role="controlgroup" data-type="horizontal" data-mini="true">
            <a href="#" data-role="button" data-iconpos="notext" data-icon="grid">sort</a>
            <a href="#" data-role="button" data-iconpos="notext" data-icon="filterIcon">filter</a>
      </div>
</div>