Position button segment right - html

Question

I'm writing a CSS framework and when it comes to handling buttons I'm trying to make it so that the user can segment the button (this is done, see the fiddle below) - however, I want to add another semantic CSS selector that will allow the user to positon this left/right of the button text (automatically right). My issue is, however - I don't want to affect the HTML in any way, the HTML structure is the same for every other button, so I'd rather not altar this if possible.
I've tried floating the segment left, afterwards I thought it was pretty obvious that wouldn't work - the height of the button is also dependent on the padding of the segment - so (as far as I'm aware) it's not possible to position this absolutely. I'm having a mental block as to how to achieve this.
Here is my current CSS:
.dte.button {
border-radius: 0;
display: inline-block;
border: 0;
outline: 0;
padding: 10px;
background: #34495e;
color: white;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
cursor: pointer;
transition: 0.25s all;
position: relative;
}
button.dte.button.segmented {
padding: 0;
padding-left: 10px;
position: relative;
}
.dte.button .segment {
filter: brightness(50%);
background: rgba(0, 0, 0, 0.53);
padding: 10px;
display: inline-block;
margin-left: 10px;
}
And my HTML structure
<button class="dte button segmented">
This should align the segment RIGHT (it does)
<div class="segment">
<i class="fa fa-align-right"></i>
</div>
</button>
<button class="dte button segmented left">
This should align the segment LEFT(It doesn't)
<div class="segment">
<i class="fa fa-align-left"></i>
</div>
</button>
Fiddle of what I current have.

Answer 1

It is not pretty, but you can use float:left if you then fix your spacing with some negative margins.
So for example:
.dte.button {
border-radius: 0;
display: inline-block;
border: 0;
outline: 0;
padding: 10px;
background: #34495e;
color: white;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
cursor: pointer;
transition: 0.25s all;
position: relative;
}
button.dte.button.segmented {
padding: 0;
padding-left: 10px;
position: relative;
}
button.dte.button.segmented.left {
padding: 10px 10px 10px 0;
}
.dte.button .segment {
filter: brightness(50%);
background: rgba(0, 0, 0, 0.53);
padding: 10px;
display: inline-block;
margin-left: 10px;
}
.dte.button.left .segment {
float: left;
margin: -10px 10px -10px 0;
}
<div style="padding: 20px;">
<button class="dte button">dte-button</button>
<button class="dte button segmented">
Dropdown Button
<div class="segment">
ICON
</div>
</button>
<button class="dte button segmented">
Segment Aligned Right
<div class="segment">
ICON
</div>
</button>
<button class="dte button segmented left">
Segment Aligned Left
<div class="segment">
ICON
</div>
</button>
</div>
Here also a fiddle.