CSS/html自动调整连接左对齐单词和右对齐单词的行

我一直想把两个词连起来。 第1句在左边，第2句在右边。所有内容都应该在同一行

我希望在重新调整浏览器的大小时，该行能够灵活地调整其宽度，但到目前为止，这一点非常失败

这与此类似：

看

---

但是只有一行字连在一起。

这就是你想要的吗

HTML:

---

我想这就是你要找的：是吗

我在h1元素中添加了一个宽度为50%的

元素，然后将其向左浮动。
演示：

只需添加：

.header {
    overflow: hidden;
    text-align: center;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    vertical-align: middle;

}
h1{
    display: inline-block; 
    clear: none;
}

h1之前的这个div：

<div class="headercontent">


如果
具有语义值，为什么要将它们更改为div？你认为它们“想要分离”的论点也适用于
div
s，它们都是块级元素。您的小提琴与
h1
s的效果相同：
<div class="header">
<div class="headerPart1">Heading</div>
<div class="headerPart2">This is a longer heading</div>
</div>

.header {
    overflow: hidden;
    text-align: center;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    vertical-align: middle;
}
.headerPart1, .headerPart2 {
    display: inline-block; 
    clear: none;
}

.header {
    overflow: hidden;
    text-align: center;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    vertical-align: middle;

}
h1{
    display: inline-block; 
    clear: none;
}

<div class="headercontent">