Bootstrap max col width

Question

I have three cols. The middle one contains a decimal number which could be in this formats:

XX.XX km
XXX.XX km
XXXX.XX km

So there could be two to four numbers before the dot and there are always two numbers after the dot.

My problem is if the number is more then two numbers befor the dot the unitary after the decimal number shifts. Then it is not in the alignment with the one under it.

This screenshot shows what I mean.

Is it possible to fix the middle col width so the unitary alignment is correct? Also the unitary could be align-right?

This is the part of my code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-6">
    <div>
        <div class="row overall">
            <div class="col-sm-12 reducedMarginRight reducedMarginLeft">
                <h4 class="font">Overall</h4>
                <hr>
            </div>
        </div>
        <div class="row vcenter">
            <div class="col-sm-3">
                <span class="align-middle">
                  <i class="glyphicon glyphicon-road glyphSize"></i>
                </span>
            </div>
            <div class="col-sm-5">
                <div class="values font align-middle" id="overall_distance">
                </div>
            </div>
            <div class="col-sm-4">
                <div class="values font text-right" id="distanceFormat">
                    km
                </div>
            </div>
        </div>
        <div class="row vcenter">
            <div class="col-sm-3">
                <span>
                  <i class="glyphicon glyphicon-time glyphSize"></i>
                </span>
            </div>
            <div class="col-sm-5">
                <div class="values font" id="overall_time">
                </div>
            </div>
            <div class="col-sm-4">
                <div class="values font text-right">
                    h
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

If I understand your question correctly, Just add text-right class in your value column

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-6">
        <div class="row overall">
            <div class="col-xs-12 reducedMarginRight reducedMarginLeft">
                <h4 class="font">Overall</h4>
                <hr>
            </div>
        </div>
        <div class="row vcenter">
            <div class="col-xs-3">
                <span class="align-middle">
                  <i class="glyphicon glyphicon-road glyphSize"></i>
                </span>
            </div>
            <div class="col-xs-5 text-right">
                <div class="values font align-middle" id="overall_distance">690.05
                </div>
            </div>
            <div class="col-xs-4">
                <div class="values font text-right" id="distanceFormat">
                    km
                </div>
            </div>
        </div>
        <div class="row vcenter">
            <div class="col-xs-3">
                <span>
                  <i class="glyphicon glyphicon-time glyphSize"></i>
                </span>
            </div>
            <div class="col-xs-5 text-right">
                <div class="values font" id="overall_time">07:20
                </div>
            </div>
            <div class="col-xs-4">
                <div class="values font text-right">
                    h
                </div>
            </div>
        </div>
        </div>
</div>