Show/hide markup
<ul class="feed">
    <li class="feed-item feed-item--small event">
        <div class="date-cube">
            <p>
                <span class="month">Oct</span>
                <span class="day">1</span>
            </p>
        </div>
    
        <div class="content">
            <h2 class="title"><a href="#">Event Title</a></h2>
            <p class="meta meta-time">8:00 PM&ndash;10:00 PM</p>
        </div>
    </li>
    

    <li class="feed-item feed-item--small event">
        <div class="date-cube">
            <p>
                <span class="month">Oct</span>
                <span class="day">11</span>
            </p>
        </div>
    
        <div class="content">
            <h2 class="title"><a href="#">Event Title: Extra Long and Spans Multiple Lines Because it&#x27;s Amazingly Long</a></h2>
            <p class="meta meta-time">10:00 AM&ndash;11:00 AM</p>
        </div>
    </li>
    

    <li class="feed-item feed-item--small event">
        <div class="date-cube">
            <p>
                <span class="month">Oct</span>
                <span class="day">24</span>
            </p>
        </div>
    
        <div class="content">
            <h2 class="title"><a href="#">Event Title: Only Medium Length</a></h2>
            <p class="meta meta-time">1:00 PM&ndash;2:30 PM</p>
        </div>
    </li>
    

    <li class="feed-item feed-item--small event">
        <div class="date-cube">
            <p>
                <span class="month">Oct</span>
                <span class="day">30</span>
            </p>
        </div>
    
        <div class="content">
            <h2 class="title"><a href="#">Event Title: Extra Long and Spans Multiple Lines Because it&#x27;s Amazing Long</a></h2>
            <p class="meta meta-time">10:00 AM&ndash;11:00 AM</p>
        </div>
    </li>
    
</ul>