Html 如何放置居中和右对齐<；部门>；她在一起

我需要在现有标题的右侧添加一些新文本。它应该全部出现在标题（CSS）下划线上方。如果标题放在第二行上也可以，但它应该放在页面的中心。在这里，您将看到主标题从中心向左移动。更糟糕的是，如果您选择一个短标题和4行边文本，则存在重叠问题

我怎样才能把所有的东西都放在正确的地方，比如在这张经过修改的图片中

在添加新内容之前，这里是我的

div

<div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h4>@Model.Heading</h4>
        </div>
    </div>
</div>

@模型标题

如果您使用的是引导和列布局网格，我能想到的最好方法就是将文本右对齐，我做了一个快速的JSFIDLE

可变长度的文本可以占据整个页面！
在这里添加新内容

还有一点

在这里添加新内容

---

使用左侧浮动的空

镜像右侧的。使用JavaScript设置其大小，如中所示。

实际上，您不能。所有不同的需求本身都不难实现，但是当你把它们加在一起时，它几乎是不可能的。您希望文本位于右侧，但不希望将文本推离中心对齐，但如果文本最终位于覆盖文本后面，则确实希望它推送文本。您希望覆盖的文本同时处于流外和流内，这是不可能的。这并不是我想要的布局。谢谢你。

<div class="container">
    <div class="col-xs-8 red">
        <h4 class="page-heading"> Variable Length Text which could take up the whole page!
        </h4>
    </div>
    <div class="col-xs-4 blue">
        <div class="stuff">
            <p>add new stuff here</p>
            <p> and a bit more here</p>
            <p>add new stuff here</p>
        </div>
    </div>