アンカータグが正しく整列していません。

Question

私はHTMLにdivタグとアンカータグを持っています。 divのテキストが与えられたhtmlを変更せずに2行にあるとき、アンカータグは新しい行に入っています。

これが試したことです。

CSS：

.relative{ 
    border: 1px solid #000; 
    position: relative; 
    margin: 0 auto 20px; 
    max-width: 940px; 
} 
.absolute{ 
    position: absolute; 
    width: 100%; 
    z-index: 5; 
    border: 1px solid red; 
} 
.content { 
    margin-bottom: 12px; 
    font-size: 14px; 
    line-height: 21px; 
    color: #333333; 
} 
.content p { 
    float: left; 
} 
.content a, .content div { 
    float: left; 
    line-height: 21px; 
} 
.content div, .content a { 
    padding-right: 10px; 
} 

はHTML：

<div class="relative"> 
    <div class="absolute"> 
    <div class="content"> 
     <p><span></span></p> 
     <div>Sample Text ##TOTAL_ACTIVITY_INCLUDE_RECENT_VIEW## Sample Text ##TOTAL_ACTIVITY_INCLUDE_RECENT_VIEW## Sample Text ##TOTAL_ACTIVITY_INCLUDE_RECENT_VIEW## Sample Text ##TOTAL_ACTIVITY_INCLUDE_RECENT_VIEW## Sample Text ##TOTAL_ACTIVITY_INCLUDE_RECENT_VIEW##</div> 
     <p></p> 
     <a href="#" class="">myLink</a> 
    </div> 
    </div> 
</div> 

Fiddle

Answer 1

が.content aにdisplay: inline;を追加動作しますそしてfloat: left;

をドロップだから、今持っている：

.content a, .content div { 
    display: inline; 
} 

予想される出力：

Check it out.

Answer 2

div{ 
    display:flex; 
} 

これは