Make horizontal 'li' the same height in CSS and HTML - html

Question

I am trying to create ul with 2 lis, and they will be set horizontally. Here how it's looking right now:
As you can see the left's li height is less than the right one. I would like that the left one is same as the right one. Also I am using Bootstrap on this website. Here is my code:
<ul class="thumbnails <?php echo $pageLang; ?>">
<li class="span6" >
<div class="commentsArea">
<h3>dsfdsfd</h3>
<p></p>
</div>
</li>
<li class="span6 <?php echo $pageLang;?>">
<label>Name</label>
<input type="text" class="span6">
<label>Description:</label>
<textarea class="span6" rows="5" maxlength="450"></textarea>
<button class="btn btn-success" value="button">
</li>
</ul>
Relevant CSS:
.commentsArea {
background-color: #D4E7ED;
text-overflow: ellipsis;
-webkit-border-radius: 10px 5px 5px 10px;
border-radius: 10px 5px 5px 10px;
-moz-border-radius: 10px 5px 5px 10px;
padding: 5px;
}
I tried to set commentsArea height to 100%, but it didn't help. Also if I set the left li height "hard coded" (for example, height=228px) it works fine.
Is there a way to make (1) and (2) the same height?

Answer 1

If you can use a fixed height, add the below CSS
.thumnails li {
height: 228px;
}
Or whatever height is required.

Answer 2

I would recommend you not to use ul and li for such a markup. It's pretty easy to accomplish using divs. In fact it does not look like a proper usage of lists.
<div class="thumbnails thumbnails-cont">
<div class="span4 comments-cont">
<div class="commentsArea">
<h3>dsfdsfd</h3>
<p></p>
</div>
</div>
<div class="span4 offset4">
<label>Name</label>
<input type="text" class="span6">
<label>Description:</label>
<textarea class="span6" rows="5" maxlength="450"></textarea>
<button class="btn btn-success" value="button">Test</button>
</div>
</div>
CSS:
.thumbnails-cont {
position: relative;
}
.comments-cont {
position: absolute;
top: 0;
bottom: 0;
}
http://jsfiddle.net/n2VGS/