Putting a text to right end

HTML & CSS
1 

<div style="width:100%">
  <span style="background-color:yellow;width:50%">leftEnd</span>
  <span style="background-color:pink;width:50%">rightEnd</span>
</div>

Can I put the pink box to right end with your help
(with 2 columns -yellow column and pink column- if possible)

2

It would be better to make those spans divs instead. The float them left and right.

<div style="width:100%">
  <div class="left">leftEnd</div>
  <div class="right">rightEnd</div>
</div>

.left {
  background-color:yellow;width:50%
}

.right {
  background-color:pink;width:50%
}
3

Along with what Ralph suggested about using divs I would also suggest setting a negative right margin on your left float. That will soak up the 50% width rounding errors in various browsers which will prevent float drop.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo Layout</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
}
#wrap {
    width:85%;
    min-width:700px; /*set a min-width of some sort*/
    margin:0 auto;
   [COLOR=Blue] overflow:hidden;[/COLOR]/*contain child floats*/
    background:#CDF;
}
.left {
    float:left;
    width:50%;
    [COLOR=Blue]margin-right:-1px;[/COLOR] /*soak up rounding errors*/
    background:yellow;
}
.right {
    float:right;
    width:50%;
    background:pink;
}
</style>

</head>
<body>

<div id="wrap">
    <div class="left">
        <p>Left content here</p>
        <p>Left content here</p>
        <p>Left content here</p>
        <p>Left content here</p>
    </div>
    <div class="right">
        <p>Right content here</p>
        <p>Right content here</p>
        <p>Right content here</p>
    </div>
</div>

</body>
</html>