行の先頭に常に表示するアイコンを整列する方法 - CSS

Question

タイトルバーには長い名前が表示され、タイトルの横には常にアイコンが表示されます。長いタイトルの最初の行に 今、アイコンは改行ごとにプッシュダウンされます。

例：

私は次の一番上の行が始まるところに、上部に常にアイコンが表示されるようにしようとしています。

HTML：

<div class="wrapper"> 
<span class="span_wrapper">sometextsometextsometext sometext sometext sometext sometextsometextsometext sometextsometextsometext sometextsometextsometext sometextsometextsometext 
</span> 
<span class="span_wrapper_icon"><span class="qx qx-left-arrow style="cursor: pointer;"></span></span></div> 

CSS：

.wrapper { 
    padding: 10px; 
    background-color: #1361B0; 
    height: 100%; 
    font-size: 20px; 
    color: #F5F5F5; 
    font-weight: 300; 
    font-family: Roboto; 
    box-shadow: 0 9px 0 0 #F7F7F7, 0 -9px 0 0 #F7F7F7, 3px 0 8px -2px #607D8D, -3px 0 8px -4px #607D8D; 
} 

.span_wrapper{ 
    line-height: 30px; 
    font-size: 20px; 
    word-break: break-word; 
} 

.span_wrapper_icon { 
    float: left; 
    margin-right: 10px; 
    position: relative; 
    top: 2px; 
} 

.qx qx-left-arrow { 
    display: inline-block; 
    text-align: center; 
    font-size: 16px; 
    width: 16px; 
    padding: 5px; 
} 

任意のアイデアは？ありがとう！

Answer 1

このようにspan_wrapper_iconをspan_wrapperの上に置きます。

<div class="wrapper"> 
    <span class="span_wrapper_icon"><span class="qx qx-left-arrow" 
    style="cursor: pointer;"></span></span> 

    <span class="span_wrapper">sometextsometextsometext sometext sometext 
    sometext sometextsometextsometext sometextsometextsometext 
    sometextsometextsometext sometextsometextsometext 
    </span> 

</div> 

が、これは

を役に立てば幸い