Html 如何使div文本内容在不替换div的情况下换行，并使div向右扩展？

我有一个包含div节点的列表。 每个节点有2行（div）。 每行有3个内联div（间隔符和内容）

问题是，当content div的文本很长时，div会被移到“next”行。我需要div保持在原位，文本要包装，但不要在视觉上覆盖下面的任何其他注释

此外，conent Div需要完全扩展右侧，填充空间

感谢您的帮助

.tree{
字体系列：无衬线；
字体大小：14px；
}
.节点{
}
.第1行{
}
.row2{
}
.节点图标{
显示：内联块；
边框：1px纯灰；
宽度：1米；
文本对齐：居中；
垂直对齐：顶部；
}
.垫片{
显示：内联块；
边框：1px纯灰；
宽度：1米；
垂直对齐：顶部；
}
.节点标题{
显示：内联块；
边框：1px纯灰；
垂直对齐：顶部；
}
.节点注释{
显示：内联块；
边框：1px纯灰；
字号：0.8em；
垂直对齐：顶部；
}

•
节点1-问题1
节点1注释。我怎样才能让div向右填写？

•
节点2-问题2
节点2注释。为什么节点2注释所在的div在文本较长时会分解为另一个“行”？如何才能使div保持在原来的位置，并且只将文本而不是div换行到另一行？

您可以像我一样在宽度上使用“calc”。函数的作用是：执行一个用作属性值的计算

 width: calc(100% - 42px);

.tree{
字体系列：无衬线；
字体大小：14px；
}
.节点{
}
.第1行{
}
.row2{
}
.节点图标{
显示：内联块；
边框：1px纯灰；
宽度：1米；
文本对齐：居中；
垂直对齐：顶部；
}
.垫片{
显示：内联块；
边框：1px纯灰；
宽度：1米；
垂直对齐：顶部；
}
.节点标题{
显示：内联块；
边框：1px纯灰；
垂直对齐：顶部；
}
.节点注释{
显示：内联块；
边框：1px纯灰；
字号：0.8em；
垂直对齐：顶部；
宽度：计算（100%-42px）；
}

•
节点1-问题1
节点1注释。我怎样才能让div向右填写？

•
节点2-问题2
节点2注释。为什么节点2注释所在的div在文本较长时会分解为另一个“行”？如何才能使div保持在原来的位置，并且只将文本而不是div换行到另一行？

实施建议解决方案后链接到JSBIN：实施另一个解决方案后链接到JSBIN（基于Flexbox）：