JSFiddle - React, Tailwind, and code Playground

HTML

<div style="padding-bottom:10px"><button>SORT</button></div>
<div id="content">
<div class="webinar-item" data-date="9/14/2012">
    <div class="cal">
        <span class="m">sep</span>
        <span class="d">14</span>
    </div>

    <div class="data">
        <a href="#" title="Webinar Title">
            <h2>Webinar Title</h2>

            <span class="clearfix st Specific-Times">
                <span class="s">
                    <em>Start:</em>10:00am
                </span>
                <span class="f">
                    <em>Finish:</em>12:30pm
                </span>
            </span>

            <span class="price">
                <em>Price:</em>FREE
            </span>

            <p class="overview-1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt sagittis nunc. Curabitur mollis hendrerit diam ac iaculis. Phasellus velit neque, aliquet eu viverra a, congue id sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec magna justo, viverra nec bibendum semper, porttitor pellentesque purus. In ante metus, tincidunt eu suscipit sit amet, imperdiet id justo. Phasellus elementum egestas nibh, vitae sodales nunc aliquet non.
            </p>
        </a>
        <a href="#">go to meeting</a>
    </div>
</div>

<div class="webinar-item" data-date="1/10/2012">
    <div class="cal">
        <span class="m">jan</span>
        <span class="d">10</span>
    </div>

    <div class="data">
        <a href="#" title="Webinar Title">
            <h2>Webinar Title</h2>

            <span class="clearfix st Specific-Times">
                <span class="s">
                    <em>Start:</em>10:00am
                </span>
                <span class="f">
                    <em>Finish:</em>12:30pm
                </span>
            </span>

            <span class="price">
                <em>Price:</em>FREE
            </span>

            <p class="overview-1">
      ...

CSS

a{ text-decoration:none; font-size: 10px; color:black}
.cal{ font-weight:bold; font-size:15px; color:blue}
.webinar-item{ border:1px solid green; margin-bottom:10px}
button {font-size:20px; font-weight:bold; }

JavaScript

$('button').click(function() {    
    $('#content').html( $('.webinar-item').sort(sortDate));
})

function sortDate(a, b) {     
    return parseDate(a) > parseDate(b) ? true : false;
}

function parseDate(el) {
    return Date.parse($(el).data('date'));
}