如何用CSS重新排列这些元素？

Question

CodePen： http://codepen.io/leongaban/pen/ndFgs

所以我有一个有2列的表，左栏宽60％，右栏40％。

在左栏的内部，我有一个需要居中的div，在div中有3个其他元素（span with a list，另一个span带有测试，另一个span with a list）

这些元素需要并排浮动，直到浏览器调整大小足以进行媒体查询，然后使跨度最终相互叠加。

这是我想要实现的完美范例：

然而，这是我的问题发挥作用的地方。为了确保包含这3个元素的div保持在左表列的内部居中。我必须在其上设置固定宽度：

margin: 0 auto;
max-width: 200px; // or width: 70%;

但是，如果任何元素的名称，标题或公司真的很长，它将打破布局。

我的CodePen布局示例：http://codepen.io/leongaban/pen/ndFgs

布局工作示例：

由于名称太长而导致布局损坏的示例

所以这就是我被困住的地方，如果一个名字太长，其中一个元素（第三个跨度）会无意中被抛到第二行。因为我有一个固定的宽度。

我能想到的唯一解决方案是使用jQuery来检查所有跨度的宽度，如果加起来的宽度总数大于浮动容器的宽度，则重新排列故意。

你会怎么解决这个问题？

我希望我可以使用Flex-box，但我们必须支持至少IE8。 ：（

Answer 1

将范围“#the_requested”赋予特定宽度将导致溢出转到新行。例如

#the_requested {
background: purple;
width: 168px;

}

实施例： http://codepen.io/anon/pen/zIhca

显然你想让左边的跨度宽度与右边的跨度相匹配。然后，左侧+中心+右侧的跨度应该是父级的宽度。