浮動小数点：テキストと一緒に使用できない

Question

float:leftを使用して、タイトルと同じ行に字幕を残そうとしています。

ただし、タイトルが改行されると、字幕も改行されます。

p { 
 
    font-family: Montserrat; 
 
    font-size: 24px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    line-height: 100%; 
 
    float: left; 
 
} 
 
.other { 
 
    font-size: 14px; 
 
    font-family: Montserrat; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    position: relative; 
 
    top: 3px; 
 
    color: #ff442b; 
 
}

<p><b>Title goes here.&nbsp;</b> 
 
</p> 
 
<p class="other">Subtitle</p> 
 
<br> 
 
<br> 
 
<br> 
 
<div> 
 
    <p><b>Title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here.&nbsp;</b> 
 
    </p> 
 
    <p class="other">Subtitle</p> 
 
</div>

Answer 1

あなたはfloatを消去しpタグにdisplay: inlineを使用することができます。

https://jsfiddle.net/eueuo8kk/

（しかし、あなたはそれ以外の場合は、このクラスの代わりpタグを使用する必要がありますページのpタグに適用されます）

P .:私は字幕規則からposition: relativeも消去しました。それらをベースラインに沿って整列させておく。