CSS: two columns

<div class="right"> <p>1</p> </div>
<div class="left">  <p>2</p> </div>
<div class="left">  <p>3</p> </div>
<div class="left">  <p>4</p> </div>
<div class="right"> <p>5</p> </div>
<div class="right"> <p>6</p> </div>

2 1
3 5
4 6

div.right { width:50%; float:right; clear:right; }
div.left { width:50%; float:left; clear:left;}

2 1
3
4 5
  6

2 1
3 4
6 5

<html>
    <head>
         <style>
            div {width: 198px; border: 1px solid black; }
            div.onediv, div.tendiv, div.xyzdiv { float: right;}
            div.twodiv, div.abcdiv, div.pqrdiv { float: left;}
        </style>
    </head>
    <body>
        <div style="width: 400px;">
            <div class="onediv"> <p>One name</p> <textarea id="one"></textarea></div>
            <div class="twodiv"> <p>Two name</p> <textarea id="two"></textarea></div>
            <div class="tendiv"> <p>Ten name</p> <textarea id="ten"></textarea></div>
            <div class="abcdiv"> <p>Abc name</p> <textarea id="abc"></textarea></div>
            <div class="xyzdiv"> <p>Xyz name</p> <textarea id="xyz"></textarea></div>
            <div class="pqrdiv"> <p>Pqr name</p> <textarea id="pqr"></textarea></div>
        </div>
    </body>
</html>

<html>
    <head>
         <style>
            div {width: 198px; border: 1px solid black; }
            div.col1 { float: right;}
            div.col2 { float: left;}
        </style>
    </head>
    <body>
        <div style="width: 400px;">
            <div class="col1"> <p>One name</p> <textarea id="one"></textarea></div>
            <div class="col2"> <p>Two name</p> <textarea id="two"></textarea></div>
            <div class="col1"> <p>Ten name</p> <textarea id="ten"></textarea></div>
            <div class="col2"> <p>Abc name</p> <textarea id="abc"></textarea></div>
            <div class="col1"> <p>Xyz name</p> <textarea id="xyz"></textarea></div>
            <div class="col2"> <p>Pqr name</p> <textarea id="pqr"></textarea></div>
        </div>
    </body>
</html>

.left { width: 51%; float: left; }
.right { width: 49%; }

<style>
  div div { text-align: center; padding: 20px 0; overflow: hidden; }
  .left { width: 251px; float: left; background: red; }
  .right { width: 249px; background: green; }
</style>
<div style="width: 500px;" >
  <div class="left"> <p>1</p> </div>
  <div class="right">  <p>2</p> </div>
  <div class="left">  <p>3</p> </div>
  <div class="left">  <p>4</p> </div>
  <div class="right"> <p>5</p> </div>
  <div class="right"> <p>6</p> </div>
</div>

.left-column .right, .right-column .left {
    display: none;
}

.right {
    position: flow(side);
}

.container {
    position: relative;
}

.left, .right {
    position: absolute;
    top : 0;
    width: 50%;
}

.left {
    left: 0;
}

.right {
    left: 50%;
}

.left ~ .left, .right ~ .right {
    top : 100px;
}

.left ~ .left ~ .left, .right ~ .right ~ .right {
    top : 200px;
}

.left ~ .left ~ .left ~ .left, .right ~ .right ~ .right ~ .right {
    top : 300px;
}

... /* you need to include as many rules as the maximum possible height */

<table>
    <tr>
        <td>
            <p>One name</p> <textarea id="one"></textarea>
        </td>
       <td>
            <p>XYZ name</p> <textarea id="xyz"></textarea>
        </td>
    </tr>
   ....
 </table>

$("div:eq(3)").remove().insertAfter("div:eq(4)");

<style>
  #container { width: 500px; border: 1px grey solid; overflow: hidden; }
  #container .rightSide { width: 250px; float: right; }
  #container .left { width: 250px; background: red; padding: 20px 0; overflow: hidden; text-align: center; }
  #container .right { width: 250px; background: green; padding: 20px 0; overflow: hidden; text-align: center; }
</style>
<script type="text/javascript">
$(document).ready(function() {
  $('#container').prepend('<div class="rightSide"></div>');
  $('#container div.right').each(function() {
    var $rightContent = $(this).remove().html();
    $('.rightSide').append('<div class="right">' + $rightContent + '</div>');
  });
});
</script>
<div id="container" >
  <div class="right"> <p>1</p> </div>
  <div class="left">  <p>2</p> </div>
  <div class="left">  <p>3</p> </div>
  <div class="left">  <p>4</p> </div>
  <div class="right"> <p>5</p> </div>
  <div class="right"> <p>6</p> </div>
</div>

<html>
    <head>
        <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
        <link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
     </head>
     <body>
     <div class="container_16">
         <div class="grid_1 alpha" style="text-align:center;">
            2
         </div>
         <div class="grid_1 omega" style="text-align:center;">
            1
         </div>
         <div class="clear"></div>
         <div class="grid_1 alpha" style="text-align:center;">
            4
         </div>
         <div class="grid_1 omega" style="text-align:center;">
            3
         </div>
         <div class="clear"></div>
         <div class="grid_1 alpha" style="text-align:center;">
            5
         </div>
         <div class="grid_1 omega" style="text-align:center;">
            4
         </div>
    </div>
</body>
</html>