CSS, html две колонки авто длина

Question

Как сделать эти столбцы одинаковыми? Не исправление. Я хочу сделать это автоматически. Это означает, что когда будет содержать больше текста, он будет длиннее, поэтому второй будет одинаково длинным. CSS

article.leftnews { 
    float: left; 
    border-radius: 30px; 
    width: 43%; 
    padding-top: 1em; 
    padding-left: 1em; 
    padding-right: 1em; 
    overflow: auto; 
    border:5px solid #0000CC; 
} 
article.rightnews { 
    border-radius: 30px; 
    margin-left: 52%; 
    padding-top: 1em; 
    padding-left: 1em; 
    padding-right: 1em; 
    overflow: auto; 
    border:5px solid #000066; 
} 
section{ 
    position:relative; 
    margin-left:auto; 
    margin-right:auto; 
    width: 700px; 
    text-align: justify; 
} 

My demo here

Answer 1

Лучший способ для меня использует CSS table и table-cell

http://jsfiddle.net/2d9917o7/

Обновление: для закругленной стиле углы, дополнительные <div> внутри каждой ячейки таблицы необходимо.

http://jsfiddle.net/2d9917o7/1/

HTML

<div class="container"> 
    <article class="leftnews">left<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>end</article> 
    <article class="rightnews">right</article> 
</div> 

CSS

.container { 
    display: table; 
    width: 100%; 
} 

.leftnews, 
.rightnews { 
    display: table-cell; 
    width: 50%; 
    background: pink; 
} 

.leftnews { 
    background: lime; 
}