How to design a two column button in Ionic framework

I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m in the top All time answerers list.

I actually asked this question myself:

What I would like to achieve is this:

Surely, I went through the button documentation, but it seems nothing similar is there. So, I would appreciate some pointing in the right direction (codepen with a basic example would be most awesome).

So, ideally, this would be one button tag where I would be able to pass two variables (one which would appear on the left and one on the right). This does smell like a job for a Angular directive, though I haven’t fiddled with it too much just yet so a friendly nudge in the right direction would be appreciated.

Answer from Malek Hijazi was pointing out to use the ButtonBar component, but I already knew about it and it wasn’t what I needed. Finally, I managed to answer this question myself after some fiddling with it:

What I ended up doing in the end was this: I created a div with a class button and then inside it I created additional two div‘s with custom classes.

How this looks like on CodePen:

And, the code below:

.leftButtonSide {
    width: 50%;
    float: left;
    color: #000;
}

.rightButtonSide {
    width: 50%;
    float: left;
    background: #F2F2F2;
    color: #000;
    border-radius: 2px;
}

<div ng-repeat="d in data" class="button button-positive-outline">
    <div class="leftButtonSide">2</div>
    <div class="rightButtonSide">2,00</div>
</div>

True, for the exact same look you would have to play a bit with CSS. I ended up with this in the end:

Hope this helps someone too!

https://twitter.com/HitmanHR/status/669836667893768192