次の行から始まる単語を1行目の最初の文字に合わせる

Question

2行目を始点とするすべての単語がE（Enter）になるようにテキストを整列させる方法はありますか？

.question-arrow { 
 
    display: inline-block; 
 
    width: 25px; 
 
    height: 25px; 
 
    color: #b4c1c8; 
 
    font-weight: bold; 
 
    background-color: #eceff1; 
 
    border-radius: 25px; 
 
    text-align: center; 
 
    line-height: 22px; 
 
    margin-right: 10px; 
 
}

<div style="font-family:Arial;font-size:16px;width:300px"> 
 
    <div> 
 
    <div class="question-arrow">&gt;</div> 
 
    <label>Enter the number of customers who might be interested in purchasing your products and/or services each year?</label> 
 
    </div> 
 
</div>

https://jsfiddle.net/anjanesh/rafop92e/

Answer 1

あなたは矢印を浮遊し、ラベルにBFC（ブロックフォーマッティングコンテキスト）がリセットされる場合があります：

.question-arrow 
 
{ 
 
    float:left; 
 
    width:25px; 
 
    height:25px; 
 
    color:#b4c1c8; 
 
    font-weight:bold; 
 
    background-color:#eceff1; 
 
    border-radius:25px; 
 
    text-align:center; 
 
    line-height:22px; 
 
    margin-right:10px; 
 
} 
 
label { 
 
    display:block; 
 
    overflow:hidden; 
 
}

<div style="font-family:Arial;font-size:16px;width:300px"> 
 
    <div> 
 
     <div class="question-arrow">&gt;</div> 
 
     <label>Enter the number of customers who might be interested in purchasing your products and/or services each year?</label> 
 
    </div> 
 
</div>

またはフレックスを使用します。

.question-arrow 
 
{ 
 
    display:inline-block; 
 
    width:25px; 
 
    height:25px; 
 
    color:#b4c1c8; 
 
    font-weight:bold; 
 
    background-color:#eceff1; 
 
    border-radius:25px; 
 
    text-align:center; 
 
    line-height:22px; 
 
    margin-right:10px; 
 
}

<div style="font-family:Arial;font-size:16px;width:300px"> 
 
    <div style="display:flex;"> 
 
     <div class="question-arrow">&gt;</div> 
 
     <label>Enter the number of customers who might be interested in purchasing your products and/or services each year?</label> 
 
    </div> 
 
</div>

Answer 2

このようなあなたのコンテナのdivにクラスを追加します。

<div style="font-family:Arial;font-size:16px;width:300px"> 
    <div class="same_heights"> 
     <div class="question-arrow">&gt;</div> 
     <label>Enter the number of customers who might be interested in purchasing your products and/or services each year?</label> 
    </div> 
</div> 

そして、あなたのCSSに以下を追加：

.same_heights{ 
    display:flex; 
} 

これはコンテナdivにすべての子を同じ高さにするよう指示します。これは私があなたのフィドルを編集したときに機能しました。