Html 在元素之间添加水平线

我试图在两个元素之间添加一条水平线，比如LinkedIn： 我无法使图像左侧的行停止在左侧计数。我在谷歌上搜索了很长一段时间，找不到这个特殊的案例。我肯定它在外面，但我还没找到。这就是我取得的成绩：

HTML：

<label>count</label>
<div class="img">
<img src="http://i.stack.imgur.com/qh235.png" />
</div>

我还认为这个结构可能是一个选项（div位于元素之间，div有一个边框）：

HTML：

<label>count</label>
<div class="hr-line"></div>
<img src="http://i.stack.imgur.com/qh235.png" />

但它也不完全起作用。如果有人能对其中任何一种尝试进行润色，那就太好了。

方法1:Flexbox

.divided{
显示器：flex；
对齐项目：居中；
}
.分隔器{
柔性生长：1；
边框底部：1px纯黑；
保证金：5px
}

内容1
内容2

这里是另一个：

.box{
宽度：100%；
显示：-moz flex；
显示：-webkit flex；
显示：-ms flex；
显示器：flex；
}
人力资源{
/*边框：.5px实心#000*/
左边距：10px；
右边距：10px；
}
.人力资源热线{
-moz-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
}

计数

不错。但是有什么办法可以降低线的厚度吗？对于最小厚度1px来说，这相当厚。@mikeyaworski-是的，只需删除行

边框：1px…

这在Firefox中不起作用。有什么方法可以更新它吗？很好的答案，特别是逻辑上的分解。这些评论只是为了补充答案/问题，但我不得不说这是一个完美的书面答案。干得好，很有魅力。竖起大拇指！

<label>count</label>
<div class="hr-line"></div>
<img src="http://i.stack.imgur.com/qh235.png" />

div.hr-line {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    width: 100%;
    border-bottom: 1px solid #7A7A7A;
}