title: How to vertically align text within a table cell?
body: <p>I am working on a baseball scores website. I have got a head-to-head matchups table for conference games.</p>
  
  <p>The home teams are in the table horizontally. The away teams (like below) are in the table cell vertically.</p>
  
  <p>The name Mississippi State makes the table cell long from top to bottom. How do I get Alabama and Auburn to align with the bottom of the table cell?</p>
  
  <p>I am using Html 5. Placing valign="bottom" won't work with Html 5.</p>
  
  <pre><code>&lt;td&gt;
  A&lt;br&gt;
  l&lt;br&gt;
  a&lt;br&gt;
  b&lt;br&gt;
  a&lt;br&gt;
  m&lt;br&gt;
  a&lt;br&gt;
  &lt;/td&gt;
  
  &lt;td&gt;
  A&lt;br&gt;
  u&lt;br&gt;
  b&lt;br&gt;
  u&lt;br&gt;
  r&lt;br&gt;
  n&lt;br&gt;
  &lt;/td&gt;
  
  &lt;td&gt;
  M&lt;br&gt;
  i&lt;br&gt;
  s&lt;br&gt;
  s&lt;br&gt;
  i&lt;br&gt;
  s&lt;br&gt;
  s&lt;br&gt;
  i&lt;br&gt;
  p&lt;br&gt;
  p&lt;br&gt;
  i&lt;br&gt;
   &lt;br&gt;
  S&lt;br&gt;
  t&lt;br&gt;
  a&lt;br&gt;
  t&lt;br&gt;
  e&lt;br&gt;
  
  &lt;/td&gt;
  </code></pre>
  
  <p>-------- Edit ------
  Here's the page I am working on:
  <a href="http://www.hitsnruns.com/pages/matchups/Matchups.php" rel="nofollow">http://www.hitsnruns.com/pages/matchups/Matchups.php</a></p>
  
  <p>-------- Edit 3/30/16 -------
  I got it figured out:
  <a href="http://www.hitsnruns.com/2016/head-to-head-matchups/southeastern-conference/" rel="nofollow">http://www.hitsnruns.com/2016/head-to-head-matchups/southeastern-conference/</a>
  I looped through each of the team names and enclosed each letter in a <p> tag.</p>