Aligning two UL's to same baseline with CSS - css

Question

Trying to get two UL's to align to a single baseline, while having one UL flush left and the other UL flush right.
Currently, the UL's do not align and appear like this:
How do I get the two UL's to share the same baseline?
CSS
#footer ul,
#footer li,
#footer span,
#footer a {
margin: 0;
padding: 0;
position: relative;
}
#footer {
list-style-type: none;
padding: 0;
margin-left: 21px;
margin-right: 20px;
text-decoration: none;
}
#footer a{
text-decoration: none;
padding: 0 7px;
color: #777;
}
#footer li {
display: inline;
}
#footer li > a {
color: #000;
font-size: 11px;
font-weight: bold;
text-decoration: none;
color: #777;
}
#footer li:hover a {
color: #71979f;
}
#social ul,
#social li,
#social span,
#social a {
margin: 0;
padding: 0;
position: relative;
}
#social {
margin: 0 31px 0 0;
padding: 0;
height: 15px;
}
#social li {
margin: 0 8px 0 0;
padding: 0;
list-style-type: none;
height: 15px;
float: right;
}
#social li.last{
margin-right:0px;
}
#social li a {
background-image: url("../images/icon_social.png");
background-position: 0px 0px;
background-repeat: no-repeat;
display: block;
height: 15px;
width: 18px;
}
#social li#social-twitter a{
background-position: 0px 0px;
}
#social li#social-twitter a:hover {
background-position: 0px -15px;
}
#social li#social-youtube a{
background-position: -18px top;
}
#social li#social-youtube a:hover {
background-position: -18px -15px;
}
#social span {
display: inline;
font-size: 11px;
color: #777;
}
HTML
<div>
<ul id="social">
<li id="social-youtube" class="last"></li>
<li id="social-twitter"></li>
<li id="social-text"><span>STAY CONNECTED</span></li>
</ul>
<ul id="footer">
<li><a href='#'><span>Blog</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
<li><a href='#'><span>Knowledgebase</span></a></li>
<li><a href='#'><span>Site Map</span></a></li>
<li><a href='#'><span>Privacy/Legal</span></a></li>
<li><a href='#'><span>Mailing List</span></a></li>
</ul>
</div>

Answer 1

ul tags are block elements you may need to float them and assign the same height:
#social {
float:right;
height:20px;
}
#footer {
float:left;
height:20px;
}
The demo http://jsfiddle.net/CvLt9/2/

Answer 2

#social, #footer{ vertical-align:bottom; }