html - imageicon movedown をテキストで作成する css

Question

私はこのようにしようとしています、

単一行の「x」アイコンしかないテキストも同じ行にあるが、2 行以上の「x」アイコンを持つテキストも最後の行に移動したい場合。

http://jsfiddle.net/V6H67/

1)

This is text to test         x

2)

This is test to test
this is second line          x

私はこれを試しています、

css:

.leftalign {
   float: left;
 }
.rightalign{
 float: right;
 }

.mainWrap{
  width: 100%;
}

.removeWrap {
  width: 100%;
}

Html:
<div class="mainWrap">
   <div class="title leftalign">
      This is test to test
      this is second line  
        <div class="removeWrap rightalign">
          <a href="" class="CloxeIcon">x</a>
        </div>
    </div> 
</div>

これを使用することで、

This is test to test this is second line this is 
third line this is fourth line this is fifth line new 
line                                                x

問題は「x」アイコンが「新しい」単語の下にあることです

私はこれが好きです、すべてのテキストは左側にあり、アイコンは右側にあるべきです

This is test to test this second line this  is 
third line this is fourth line this is fifth 
line new line                                    x

Answer 1

次のような相対位置と絶対位置の使用を考えることができます。
<div class="mainWrap">
This is test to test
this is second line
<a href="" class="CloxeIcon">x</a>
</div>

そしてCSS
.mainWrap{
position: relative;
}
.mainWrap a{
position: absolute;
display: block;
bottom: 0;
right: 0;
}

Answer 2

そのように？jsフィドル

<div class="two_columns">

    <div class="left_column">
        This is test to test<br>
        This is another line
    </div>
    <div class="right_column">
        x
    </div>
</div>

そしてCSS：

.two_columns>div {
    display: inline-block;
    vertical-align: left;
}
.right_column {
    margin-left: 5px;
}

Answer 3

HTML:

<div class="mainWrap">
    <div class="title leftalign">
    This is test to test this is second line 
    </div> 
    <div class="removeWrap rightalign">
       <a href="" class="CloxeIcon">x</a>
   </div>
</div>

CSS:

.leftalign {
   display: inline-block;
   width: 125px;
}
.rightalign{
   display: inline-block;
   vertical-align: bottom;
}
.mainWrap{
  width: 100%;
}