strange absolute positioning CSS Issues

Question

I've been having this absolute positioning CSS issue.

IE 10+ works just fine but Chrome gets distorted as shown in the images below:

Any help please.

(this distortion seems to have started with chrome 52 update)

IE

Chrome

HTML

<div class="widget style1 navy-bg">
    <div class="row">
        <div class="col-xs-6 text-left">
            <h4>New Contacts</h4>
            <h2 class="font-bold">707</h2>
            <div class="speed_l">
                <h2>39</h2>
                <small>/hr</small>
            </div>
        </div>
        <div class="col-xs-6 text-right">
            <h4>Visitors Today</h4>
            <h2 class="font-bold">2129</h2>
            <div class="speed_r">
                <h2>387</h2>
                <small>/hr</small>
            </div>
        </div>
    </div>
</div>

CSS

.widget {
    border-radius: 5px;
    padding: 15px 20px;
    margin-bottom: 10px;
    margin-top: 10px;
}

    .widget.style1 h2 {
        font-size: 40px;
    }

    .widget h2,
    .widget h3 {
        margin-top: 5px;
        margin-bottom: 0;
    }

    .speed_l {
        display: inline-flex;
        padding-left: 15px;
        margin-top: 5px;
    }

        .speed_l small {
            position: absolute;
            top: 87px;
            font-size: 14px;
            color: #def;
        }

        .speed_l h2 {
            font-size: 30px !important;
        }

    .speed_r {
        display: inline-flex;
        padding-right: 12px;
        margin-top: 5px;
    }

        .speed_r small {
            position: absolute;
            top: 87px;
            font-size: 14px;
            color: #def;
        }

        .speed_r h2 {
            font-size: 30px !important;
        }

After Applying suggested solution

Answer 1

Perhaps this is what you want:

I have updated the code.

.speed_l {

    display: inline-flex;
    padding-left: 15px;
    margin-top: 5px;
}

    .speed_l small {
        position: relative;
        margin:5px;
        font-size: 14px;
        color: #def;
    }

    .speed_l h2 {
        font-size: 30px !important;
    }

.speed_r {
    display: inline-flex;
    padding-right: 12px;
    margin-top: 5px;
}

    .speed_r small {
        position: relative;
        margin:5px;
        font-size: 14px;
        color: #def;
    }