dropdown align dropdown-toggle right

Question

How can i right align the dropdown-toggle in the bootstrap dropdown? here's my code and a jsfiddle, you can see the arrow pointing down is besides the text, i want it on the right.

https://jsfiddle.net/9a83n353/

<div class="dropdown">
    <button class="btn dropdown-toggle btn-block text-left" style="background-color: white; border-color:#dee4ed" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Active</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item">Active</a>
        <a class="dropdown-item">Inactive</a>
    </div>
</div>

Answer 1

Use CSS to rotate the arrow:

.dropdown-toggle::after {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
}

Add CSS float to right align:

float:right;