controlgroup button issue

I wanted something like in thi开发者_StackOverflow社区s img (text btn and arrow btn of same height). But I couldn't get it. Here is my code

Perhaps I'm missing the point, but something like: http://jsfiddle.net/PtLKF/10/ ? Does it need to be a second button?

If so, you can probably fake it with a non-breaking space if you don't want to get too messy with the css. http://jsfiddle.net/PtLKF/13/

Yeah same as J.T.Sage, why the two buttons?

My failed attempts: http://jsfiddle.net/PtLKF/38/

<div data-role="page" id="button-tests">
    <div data-role="controlgroup" data-type="horizontal">
        <a href="tel:(866) 444-8619"  data-role="button" data-theme="e">Call (866) 444-8619</a>
        <a href=""  data-role="button" data-theme="e" data-icon="arrow-l" data-iconpos="notext"></a>
    </div>
    <div data-role="controlgroup" data-type="horizontal">
        <a href="tel:(866) 444-8619"  data-role="button" data-theme="e">Call (866) 444-8619</a>
        <a href=""  data-role="button" data-theme="e" data-icon="arrow-l" data-iconpos="notext" style="height:100%;" class="fix-button-height" id="custom-button-height"></a>
    </div>
    <div data-role="controlgroup" data-type="horizontal">
        <a href="tel:18664448619"  data-role="button" data-theme="e" data-icon="arrow-l" data-iconpos="right">Call (866) 444-8619</a>
    </div>
    <div data-role="controlgroup" data-type="horizontal">
        <a href="tel:(866) 444-8619"  data-role="button" data-theme="e">Call (866) 444-8619</a>
        <a href=""  data-role="button" data-theme="e" data-icon="arrow-l" class="hide-text" data-iconpos="right">|</a>
    </div>
</div>

CSS

.fix-button-height .ui-icon {
    margin-top:7px;
    margin-bottom:7px;
    display:block;
}

.hide-text {
    color:#fceda7;
}

.hide-text:hover { 
    color:#faeb9e;
}