php - 中央に配置された CSS 要素の上で数値を左右に拡張するにはどうすればよいですか?

Question

私は、健康要素の効果を達成しようとして、さまざまな方法を試して頭を悩ませてきました.

私がやりたいことは、中央の中央値が値を左に押し出し、別の値を右に押し出すことです。

フロートを試してみましたが、そのような作業はありましたが、探している効果が得られませんでした。

配置すると、特定の長さを超えると、それらが中央中央分離帯に完全に重なります。

これがほとんど正しいことです。

.travel-spacing {
    margin-bottom: 20px;
}

.stat-wrapper {
    height: 170px;
    width: 150px;
}

.stat-label-align {
    float: left;
    width: 150px;
    margin: 0 auto;
    text-align: center;
}

.stat-align {
    float: left;
    width: 150px;
    margin: 0 auto;
    text-align: center;
}

.val-1 {
    float: left;
    position: relative;
    margin-left: 35px;

}

.center-divide-h {
    position: absolute;
    width: 150px;
    margin: 45px auto auto -150px;
    text-align: center;
}

.center-divide-m {
    position: absolute;
    width: 150px;
    margin: 60px auto auto -150px;
    text-align: center;
}

.center-divide-s {
    position: absolute;
    width: 150px;
    margin: 75px auto auto -150px;
    text-align: center;
}

.val-2 {
    float: right;
    margin-right: 35px;
}

これはPHPです：

<div class="stat-wrapper">
<?php echo "<div class ='stat-label-align'>Level:</div> <span class=\"stat-align\">" . $playerLevel . "</span>"; ?><br />
<?php echo "<div class ='stat-label-align'>Exp:</div> <span class=\"stat-align\">" . $playerExp . "</span>"; ?><br />
<?php echo "<div class ='stat-label-align'>Health:</div> <span class=\"val-1\">" . $maxHealth . " </span><span class='center-divide-h'>/</span><span class='val-2'> " . $maxHealth . "</span>"; ?><br />
<?php echo "<div class ='stat-label-align'>Mana:</div> <span class=\"val-1\">" . $maxMana . " </span><span class='center-divide-m'>/</span><span class='val-2'> " . $maxMana . "</span>"; ?><br />
<?php echo "<div class ='stat-label-align'>Stamina:</div> <span class=\"val-1\">" . $maxStamina . "</span> <span class='center-divide-s'>/</span><span class='val-2'> " . $maxStamina . "</span>"; ?><br />
<?php echo "<div class ='stat-label-align'>Coins:</div> <span class=\"stat-align\">" . $money . "</span>"; ?><br />
</div>
<div class="travel-spacing"></div>

どのように私はそれをしたい:

 5 / 5000
40 / 5000 

いつもほどきれいではありませんが、考えられることはすべて試しました。洞察をありがとう！