I'm no CSS expert, but this is at least a start. I put this CSS and JS in my ranking question:
<style>
.unranked_container, .ranked_container {
height: 400px;
width: 2000px !important;
}
.ranked_sort_area {
width: 900px !important;
}
.container_sort_area {
display: table;
width: 100%;
}
.draggable_button {
display: inline-table;
width: 30%;
}
.ranked_bottom_label {
display: none;
}
</style>
<script>
$(document).ready(function(){
$('.sort_containers').append('<table><tbody><tr><td></td></tr><tr><td></td></tr></tbody></table>');
$('.sort_containers > table > tbody > tr:first-child > td').append($('.unranked_container'));
$('.sort_containers > table > tbody > tr:last-child > td').append($('.ranked_container'));
$('.draggable_button > div').each(function(){
if ($(this).css('clear') == 'both') {
$(this).remove();
}
})
$('.ranked_top_label').text('Ranked');
})
</script>
Note: the heights and widths in the CSS were determined by testing different values and finding what looked good with my images. If your images have different dimensions than mine, these values may need to be toggled.