Html CSS div span位置文本重叠

当文本溢出时，我在定位多个相对div时遇到问题：

理想情况下，它应该如下所示：

在div上有右边的'-'垂直中心，并且有足够的空间使文本在不重叠的情况下断开，所有这些都不需要使用任何固定的大小

我已经成功地隔离了JSFIDLE上的问题：

关键类别似乎是：

#application-subscribe-tab > div {
    position: relative;
    height: 16px;
}
#application-subscribe-tab > div > .application-subscribe {
    position: absolute;
    left: 0px;
}
#application-subscribe-tab > div > .remove-subscribe {
    position: absolute;
    right: 0px;
    cursor: pointer;
}

---

提前谢谢

这应该可以解决问题：

#application-subscribe-tab > div {
    position: relative;
    ** min-height ** : 16px;
}
#application-subscribe-tab > div > .application-subscribe {
    position: ** relative ** ;
    left: 0px;
}

---

正文{
颜色：#4c；
字体：12px/1.4 Arial，Helvetica，Verdana，无衬线；
}
上校{
左缘：4%；
}
上校{
框大小：内容框；
宽度：291px；
}
上校{
浮动：左；
}
.集团{
位置：相对位置；
z指数：1；
溢出：隐藏；
保证金：0px 0px 14px；
盒影：0px 2px 5px 1px#bfbf；
边界半径：3px0px 0px；
背景色：#FFF；
}
氢{
保证金：0px！重要；
}
分区行动{
填充：5px14px 7px；
位置：相对位置；
z指数：2；
}
.行动{
最小高度：320px；
高度：320px；
最大高度：320px；
左：3倍；
右侧填充：5px；
}
#应用程序订阅选项卡{
溢出y：滚动；
最大高度：325px；
右边填充：10px；
}
#应用程序订阅选项卡>div{
位置：相对位置；
高度：16px；
填充：7px 0px；
}
#应用程序订阅选项卡>div>。应用程序订阅{
位置：绝对位置；
左：0px；
}
#应用程序订阅选项卡>div>。删除订阅{
位置：绝对位置；
右：0px；
光标：指针；
}

Mes通知邮寄有效邮件
章鱼
-
历史建筑商业
-
壁虎
-
OPOC
-

#application-subscribe-tab > div {
position: relative;
height: 16px;
padding: 7px 0px;
}