HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<title>Lining up odd sizes inline</title>
<style type="text/css">
#eg_1 h1,
#eg_1 h2,
#eg_2 h1 {
display:inline;
text-align:baseline;
}
#eg_2 h1 span {
font-size:0.75em;
}
</style>
</head>
<body>
<div id="eg_1">
<h1>WEDDINGS </h1>
<h2> CATERING</h2>
</div>
<div id="eg_2">
<h1>WEDDINGS
<span>CATERING</span></h1>
</div>
</body>
</html>
BASELINE seems to line them up.
In eg_1 the title hierarchy is iffy.
eg_2 maintains association and title level integrity and avoids additional structure. I'd go with what you had in mind originally. The span will inherit the alignment of its parent element, the h1, so will share the same baseline.
Notice that the h1 is contained in a div, to retain block level status in the document flow.