Aligning text of different sizes in different divs - html

Question

I would like to understand the correct way to align different size type between different div classes. Right now, the code forces the smaller type to align with the top of the larger type. How do I align the type across all divs on the same typography baseline with the cleanest code. This seems like really easy stuff, but I cannot find an answer.
I also hope this is semantically correct (I am trying to create a row of data that is responsive and can resize and rearrange (float) on different devices). All suggestions welcome.
Link to Demo

Answer 1

You need to adjust the line-height and possibly the vertical margins for each font size so the match a baseline grid.
I'd recommend reading this : http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

Answer 2

Sounds like you need CSS' line-height property. That way you can make the lines of text the same height but affect font-size separately
#artist { /* Selector to affect all the elements you want */
color: #000;
font-size: 18px; /* Default font size */
line-height:18px; /* Line height of largest font-size you have so none go */
/* above the top of their container */
}
Demo

Answer 3

Adjusting where text is placed is done with padding and margin. but for this setting a p class to each of your divs gives you control of wher eyou want text placement within the div. of course your padding will vary for your baseline shift since you have mutiple em sizes of your fonts. fiddle http://jsfiddle.net/rnEjs/
#artist {
padding: 5px;
float: left;
width: 100%;
background-color: #036;
color: #000;
font-size: 18px;
overflow: hidden;
}
.genre {
width: 5em;
float:left;
height: 50px;
background-color: #09F;
}
.genre p {
padding:5px 5px;
}
.artistName {
float: left;
width: 175px;
height: 50px;
background-color: #F39;
}
.artistName p {
padding:5px 5px;
}
.birth {
float: left;
width: 5em;
height: 50px;
font-size: 12px;
background-color: #F90;
}
.birth p {
padding:15px 5px;
}
.medium {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #099;
}
.medium p {
padding:15px 5px;
}
.gallery {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #FF6;
}
.gallery p {
padding:15px 5px;
}
.website {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #99F;
}
.website p {
padding:15px 5px;
}
<div id="artist">
<div class="genre">
<p>Genre</p>
</div>
<div class="artistName">
<p>Artist First Last</p>
</div>
<div class="birth">
<p>birth year</p>
</div>
<div class="medium">
<p>medium</p>
</div>
<div class="gallery">
<p>gallery name</p>
</div>
<div class="website">
<p>website</p>
</div>
</div>

Answer 4

I found a good answer to your question from this Stackoverflow thread: Why is vertical-align:text-top; not working in CSS.
The gist of it is the following:
Understand the difference between block and inline elements. Block elements are things like <div> while inline elements are things like <p> or <span>.
Now, vertical-align attribute is for inline elements only. That's why the vertical-align didn't work.
Using the Chrome dev tool, you can tinker with your demo and see that it works: specifically, inside <div> tags, put <span> tag with appropriate style.