Layout of two different styles of event labels with CSS I have two types of event labels. The HTML markup is: 

&lt;article&gt;
    &lt;time class="reg-day"&gt;Mo&lt;/time&gt;
    &lt;time class="reg-time"&gt;13:00-14:30 Uhr&lt;/time&gt;
    &lt;p class="reg-location"&gt;Regent Street&lt;/p&gt;
&lt;/article&gt;

&lt;article&gt;
    &lt;time class="work-month"&gt;Feb&lt;/time&gt;
    &lt;time class="work-day"&gt;24&lt;/time&gt;
    &lt;p class="work-type"&gt;Chess Group&lt;/p&gt;
  &lt;p class="work-location"&gt;Moonshine Avenue&lt;/p&gt;
&lt;/article&gt;


And the CSS the question is about is: 

article {
    background-color: red;
    width: 20em;
    position:relative;
}

.reg-day {
   position: absolute;
   font-size:2.25em;
   font-weight:700;
   line-height:1.4;
   left:.5em;
}

.reg-time,
.reg-location {
   margin-left:5em;
   line-height: 1;
}

.work-month {
   -webkit-transform: rotate(270deg);
   width:3em;
   position: absolute;
   text-align:center;
   left:-1em;
   bottom:1em;
   font-weight:700;
}

.work-day {
   position: absolute;
   font-size:2.25em;
   font-weight:700;
   line-height:1.4;
   left:.75em;
}

.work-type,
.work-location {
   margin-left: 5em;
   line-height: 1;
}


I have two types of event labels and have created a CodePen here.

The first one has the day on the left, the time on the upper right, and the location on the lower right.

The second has the month upright on the left, the day and on the upper right the type of event, and the location on the lower right. 

Basically I've managed to get the layout as I wanted.  Is the way I got there ok or is there a more robust and elegant one?

Especially the part of the day of week (of the first event type) and the day of month (of the second event type) covering more or less 2 height units of the two pieces of information on the right.

Day of week/day of month: 

font-size: 3em;
line-height:1


Info: 

font-size: 1em
line-height: 1.5; 


would work.  That the info lines are the exact half of the day of week / day of month. Also i am unsure if using position absolute is the correct weapon of choice in that case. At least it prevents an misalignment of the margin-left: 5em elements. But over all the number of "magic numbers" feels a bit too high.
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:

&lt;time datetime="2014-06-30"&gt;&lt;span class="month"&gt;June&lt;/span&gt; &lt;span class="day"&gt;30&lt;/span&gt;&lt;/time&gt;

&lt;time datetime="2014-02-24"&gt;&lt;span class="month"&gt;Feb&lt;/span&gt; &lt;span class="day"&gt;24&lt;/span&gt;&lt;/time&gt;

&lt;time datetime="2014-09-15"&gt;&lt;span class="month"&gt;Sept&lt;/span&gt; &lt;span class="day"&gt;15&lt;/span&gt;&lt;/time&gt;

&lt;time datetime="2014-05-04"&gt;&lt;span class="month"&gt;May&lt;/span&gt; &lt;span class="day"&gt;4&lt;/span&gt;&lt;/time&gt;


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:

&lt;time datetime="2014-07-17T13:00Z"&gt;13:00&lt;/time&gt;-&lt;time datetime="2014-07-17T14:30Z"&gt;14:30&lt;/time&gt;


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:

&lt;table&gt;
    &lt;caption&gt;Event Information&lt;/caption&gt;

    &lt;tr&gt;
        &lt;th&gt;When&lt;/th&gt;
        &lt;td&gt;Tomorrow&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
        &lt;th&gt;Where&lt;/th&gt;
        &lt;td&gt;The Library&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
        &lt;th&gt;What&lt;/th&gt;
        &lt;td&gt;Chess Club Meeting&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;


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