You want something along the lines of what I have here. You're going to have to experiment for pixel-perfection. The reason I don't use a definition list is that you can't manipulate both definitions as a block, which this relies on. The key element here is setting line-height manually. The exact markup here isn't important, but this is one way it can be done.
<h2>MONDAY</h2>
<ul>
<li>hi</li>
<li>blah</li>
</ul>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px 0 0 100px;
}
h2 {
font: 40px sans;
width: 200px;
line-height: 36px;
float: left;
}
ul {
height: 40px;
float: left;
list-style-type: none;
margin-top: -2px;
}
li {
font: 16px sans;
line-height: 16px;
margin-top: 2px;
}
(Another property that may be useful is vertical-align, which could be used to position the text within the text line rather than shrinking the text line to fit the text.
Also note that the physical text is going to look smaller than the text height you set because you need to factor in descenders--the parts of letters that go below the text line, like lowercase g's, p's, y's, etc., which is why you'll need to play with the exact pixel amounts if you change text size. Things may also vary between fonts--you'll want one that's well supported cross-platform to get good results on all platforms.)