Trouble with aligning items - html

Question

Hello so while creating a site I've been working on I've ran into a problem. I have a link and next to it I have an image. The link is aligning the text in the link with the bottom of the image. I would like the surrounding box around the link to align with the bottom of the image without living a ~20px area below it. The code to see what I mean is below.
HTML:
<div id="links">
Link1
Link2
<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/0/0a/350x175.jpg" />
Link3
Link4
</div>
CSS:
#links{
/* SIZING */
width:70%;
min-width:625px;
min-height:10px;
/* POSITIONING */
margin-left:auto;
margin-right:auto;
background-color:#FF0;
}
.links {
/* DISPLAY */
display:inline-block;
background-color:#CCC;
border-radius:15px;
box-shadow: 2px 2px 5px #888888;
/* SIZING */
width:calc(16.25% - 10px);
height:50px;
margin:5px;
/* TEXT */
line-height:50px;
text-align:center;
text-decoration:none;
font-size:auto;
color:#000;
}
#logo{
text-decoration:none;
border:0px;
width:calc(35% - 10px);
padding-top:10px;
}

Answer 1

If you set the vertical-align to bottom it will align to the bottom like so;
.links {
background-color: rgb(204, 204, 204);
border-radius: 15px;
box-shadow: 2px 2px 5px rgb(136, 136, 136);
color: rgb(0, 0, 0);
display: inline-block;
height: 50px;
line-height: 50px;
margin: 5px;
text-align: center;
text-decoration: none;
vertical-align: bottom; //// ADDED STYLE
width: calc(16.25% - 10px);
}
Demo Here