How to arrange the dynamically generated content in two columns with equal height?

Question

Hi the below is the output what I am getting. SPECIALTIES is the heading. Let it be there.

I need the content that appeared after the heading SPECIALTIES to be arranged in 2 columns.

I have used http://masonry.desandro.com/ . As I am developing the page on XSLT I was not able to use the HTML initialization that represented on masonry. While initializing using Javascript, the feature is applicable only to the first section, means only for the content under SPECIALTIES . I have more sections like SPECIALTIES in a single page.

Do anyone have an idea to have the output as seen in the below image?

Update: I have tried the jquery initialization, it works for all only when i inspect the webpage:

here is the code:

<div class="MenuItemListDesc">
    <div class="MenuListItem">
      <h4>Ranch One Classic</h4>
      <p>Flame-grilled chicken, dressed mixed greena and roastedred pepper sauce on a toasted hoagie roll</p>
    </div>
    <div class="MenuListItem">
      <h4>Grilled Chicken & Cheese</h4>
    </div>
    <div class="MenuListItem">
      <h4>Spice Grilled Chicken</h4>
    </div>
    <div class="MenuListItem">
      <h4>Grilled Chicken Philly</h4>
      <p>Flame-grilled chicken, mozzarella, sauteed peppers and onions on a toasted hoagie roll</p>
    </div>
    <div class="MenuListItem">
      <h4>Teriyaki Chicken Sandwich</h4>
      <p>Flame-grilled chicken, grilled pineapple, lettuce and sweet teriyaki sauce on a toasted hoagie roll</p>
    </div>
    <div class="MenuListItem">
      <h4>Crispy Chicken Sandwich</h4>
      <p>Season, breaded chicken, romaine, tomatoes and mayonnaise ona toasted hoagie roll</p>
    </div>
    <div class="MenuListItem">
      <h4>Grilled Chicken Club</h4>
    </div>
  </div>

JQUERY INITIALIZATION:

var $container = $('.MenuItemListDesc');
// initialize
$container.masonry({
  columnWidth: 460,
  itemSelector: '.MenuListItem'
});

Here is my page: http://stage.ranchone.com/menu/index-revised.html

You can find it on the VIEW ITEM link on each section Thanks

Answer 1

You can use column-count CSS property

.MenuItemListDesc {
   -webkit-column-count:2; 
   -moz-column-count:2; 
   column-count:2; 
}

Demo: http://jsfiddle.net/LRvzC/