I have created a set of ul lists that appear as a 2-column table, just as I needed. However, an issue arises when the content of any list increases. The problem is that equal height is not being applied, causing the table to look broken.
Here is my Fiddle and below is the snippet
ul.filter_list {
margin: 0px;
padding: 0px;
width: 100%;
display: table;
border: 1px #000 solid;
}
li.filter_cell {
display: table-cell;
width: 50%;
float: left;
padding: 4px;
border-collapse: collapse;
border-top: 1px #000 solid;
box-sizing: border-box;
}
ul.filter_list li:nth-child(odd) {
border-right: 1px #000 solid;
}
.filtertab_title {
font-family: 'open_sansbold';
margin-top: 8px;
margin-bottom: 5px;
margin-left: 16px
}
.filtertab_value {
margin-bottom: 10px;
margin-left: 16px
}<ul class="filter_list">
<li class="filter_cell">
<div class="filtertab_title">PMT Base Name</div>
<div class="filtertab_value">
<select class="filtertab_select">
<option>Any</option>
</select>
</div>
</li>
<li class="filter_cell">
<div class="filtertab_title">Category</div>
<div class="filtertab_value">
<select class="filtertab_select">
<option>Any</option>
</select>
</div>
</li>
<li class="filter_cell">
<div class="filtertab_title">Pattern Category Name and documentation information for lorem text goes here dummy text</div>
<div class="filtertab_value">
<select class="filtertab_select">
<option>Any</option>
</select>
</div>
</li>
<li class="filter_cell">
<div class="filtertab_title">GMT Base Name</div>
<div class="filtertab_value">
<select class="filtertab_select">
<option>Any</option>
</select>
</div>
</li>
<li class="filter_cell">
<div class="filtertab_title">Measurement</div>
<div class="filtertab_value">
<select class="filtertab_select">
<option>Any</option>
</select>
</div>
</li>
<li class="filter_cell">
<div class="filtertab_title">Base Name</div>
<div class="filtertab_value">
<select class="filtertab_select">
<option>Any</option>
</select>
</div>
</li>
</ul>