Layout of two different styles of event labels with CSS

There's a difference between magic numbers and values derived from calculations. A lot of your numbers aren't really magic, you just don't know the formula to get those values. You can start by creating variables of the things you know are going to impact your values (eg. font-size, line-height, etc.). Then you start looking for a formula you think will create your magic number. When it works, change one of the values and see if it still works. The width for $month is almost bulletproof, but the rest need help:

$padding: .5em;

$day-size: 2.25em;
$day-line-height: 1.5em;

$month-size: 1em;
$month-line-height: 1em;

body {
  padding: 10em;
}

time {
  outline: 1px solid;
  display: block;
  width: 3.5em;
  padding-left: $day-line-height;
  text-align: center;
  position: relative;

  .month {
     $width: $day-size * ($day-line-height / 1em);
     font-size: $month-size;
     transform: rotate(270deg);
     position: absolute;
     top: ($day-line-height - $month-line-height) / 2 + 1;
     left: ($width / $day-line-height - $month-size) * -1 + $padding;
     width: $width;
     text-align: center;
     line-height: $month-line-height;
     outline: 1px solid blue;
  }

  .day {
     font-size: $day-size;
     line-height: $day-line-height;
     outline: 1px solid red;
  }
}

http://codepen.io/cimmanon/pen/BcraL?editors=010

If you look at the markup in the pen, you'll notice that it is a little different than what you're doing:

<time datetime="2014-06-30"><span class="month">June</span> <span class="day">30</span></time>

<time datetime="2014-02-24"><span class="month">Feb</span> <span class="day">24</span></time>

<time datetime="2014-09-15"><span class="month">Sept</span> <span class="day">15</span></time>

<time datetime="2014-05-04"><span class="month">May</span> <span class="day">4</span></time>

The time element should not be treated like a span, it has special meaning. If you don't have a valid date/time format (eg. 2014-05-04), then you need to use the datetime attribute to contain that information.

If you have two distinct times (such as your starting and ending time), then you should have two time elements:

<time datetime="2014-07-17T13:00Z">13:00</time>-<time datetime="2014-07-17T14:30Z">14:30</time>

Reference: http://www.brucelawson.co.uk/2012/best-of-time/

I don't feel that the article element is the appropriate choice for this type of information. An article is supposed to be for content that can be removed from the surrounding content and still make sense. An ordinary div or a table would be a better choice:

<table>
    <caption>Event Information</caption>

    <tr>
        <th>When</th>
        <td>Tomorrow</td>
    </tr>

    <tr>
        <th>Where</th>
        <td>The Library</td>
    </tr>

    <tr>
        <th>What</th>
        <td>Chess Club Meeting</td>
    </tr>
</table>

If the th/caption elements are cramping your style, just hide them. Tables don't have to look like tables. It's a bit rough, but you get the idea:

http://codepen.io/cimmanon/pen/Daxkb