Javascript css-有没有办法让div与h1（多行）在同一第二行上？

我正在做这件事：

<h1><span>Test Heading This is text that I want to make appear to the right This is text that I want to make appear to the right This is text that I want</span></h1> 
<div>This is text that I want to make appear to the right of the heading and above the blue base line. This is text that I want to make appear to the right of the heading and above the blue base line.  </div>

有没有办法将div与h1（多行）放在同一第二行上

这就是我想要的：

请帮忙

---

谢谢

为了在同一行上对齐两个文本块，您只需将它们都设置为“内联”。为此，只需应用css样式：

display:inline

您还需要删除
float:left，否则您可能无法获得所需的结果


h1{
字体大小：1.3em；
颜色：#fff；
背景色：#446688；
/*浮动：左*/
}
/*新风格*/
h1，div.inline{
显示：内联！重要；
}
测试标题这是文本
这是我想在标题右侧显示的文本
您也可以不使用
h1
标记来执行此操作


.bb{
边框底部：1px实心#999；
垫底：10px；
背景颜色：粉红色；
溢出：隐藏；
}
p{
边缘底部：5px；
浮动：左；
}
p跨度{
字体系列：calibri，arial；
字体大小：1.3em；
颜色：#fff；
背景色：#446688；
填充物：1px 5px 3px 5px；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
}

测试标题这是我要使其向右显示的文本这是我要使其向右显示的文本这是我要的文本
这是我想使其显示在标题右侧和蓝色基线上方的文本。这是我想使其显示在标题右侧和蓝色基线上方的文本。
我不知道您希望它与您的描述一样呈现什么。您可能需要为您试图实现的目标制作一个图像。正如Epasarello所说，从你的描述或你的小提琴中还不清楚。我在你的JSFIDLE h1 css标签中添加了宽度：50%，并获得了预期的效果。我只是用我想要实现的屏幕截图更新了问题。谢谢你能给我一个解决方案吗？我需要使用搜索引擎优化h1
.bb {
    border-bottom: 1px solid #999;
    padding-bottom: 10px;
    background-color: pink;
    overflow: hidden;
}
h1 {
    font-size: 1.3em;
    font-family: calibri, arial;
    margin-bottom: 5px;
    float: left;
}
h1 span {
    color: #fff;
    background-color: #446688;
    padding: 1px 5px 3px 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}