HTML CSS如何逐个对齐两个div并动态更改宽度

我有一个html表单，需要一个接一个地读取和蓝色圆圈（垂直对齐），当输入圆圈内的值时，我需要使用css动态更改宽度以获得所需的值。我尝试使用display:inline table和block，但它不起作用…下面是我获得的内容和需要获得的内容的图片：

http://imgur.com/Jt1nuh3

从图像中，我需要自动更改红色和蓝色圆圈上的左侧和宽度，这取决于输入的圆圈值（+999），并且需要像在下一张图片中一样双列直插…我在第一页中使用css一样的内联

以下是我的html代码：

<!-- page device statistics -->
    <div class="devicestat" title="Online: 0">
        <!-- page device title -->
        <div class="stat-name">
            <div class="stat-name-devices">Devices</div> 
            <!-- android device -->
            <div class="stat-badget-android" title="Android">+0</div>
            <!-- enigma device -->
            <div class="stat-badget-enigma" title="Enigma">+0</div>

            <div class="stat-number">0</div>
        </div>
    </div>

装置
+0
+0
0

您可以尝试将红色和蓝色圆圈的css设置为float:right；而且很清楚：两者都有；这样，无论数字是多少，它们总是被设置在右侧，完全对齐。示例如下：

.stat-badget-android{
 float:right;
 clear:both;
}
.stat-badget-enigma{
 float:right;
 clear:both;
}

如果你想要一个更好的例子，我需要看看你的css和html