Positioning a div to the right using relative - css

Question

My CSS:
.topLogoContainer{
margin-top: 2%;
width: 100%;
height: 20%;
background-color: #660066;
border-radius: 10px;
}
.topLogoText{
width: 50%;
padding: 10px;
}
p.topButton{
text-align: center;
color: white;
}
my HTML:
<div class="topLogoContainer">
<table>
<tr>
<td class="topLogoText">
<font size="18">TB's Jewelry</font>
</td><td>
<a href="buy.php" class="topButton">
<div class="topButton2">
<p class="topButton">buy</p>
</div>
</a>
</td>
</tr>
</table>
</div>
I have a top bar of a website (let's call it "Tbar") (you know, where the logo and navigation buttons go), and I want the main text at the left, vertically center inside Tbar (of course, make it look nice and give it some margin/padding) while making 2 buttons (which are round colored divs that are links) at the very bottom of, in the right inner part of Tbar. I think I need the buttons to be relative, so it will always be inside Tbar. Trying "position: relative; right: 10px; bottom: 0px;" doesn't do what I want - since it doesn't move it to the inner right of Tbar.
Javascript seems ridiculous to use, and I'm not well practiced on it.

Answer 1

Some good practices:
Avoid adding elements like p or div inside your a tag.
This is a simple layout so mixing div with table is not necessary.
Using percentage for your div's height may not work.
Below is a working example. Try changing the height of your .topLogoContainer div to fit with your need.
.topLogoContainer {
margin-top: 2%;
width: 100%;
height: 300px;
background-color: #660066;
border-radius: 10px;
position: relative;
}
.topLogoText {
position: absolute;
left: 10px;
top: calc(50% - 9pt);
color: white;
font-size: 18pt;
padding: 10px;
}
.linkContainer {
position: absolute;
bottom: 10px;
right: 0;
}
.topButton {
margin-right: 10px;
float: right;
text-align: center;
color: white;
}
<div class="topLogoContainer">
<div class="topLogoText">TB's Jewelry</div>
<div class="linkContainer">
something else
buy
</div>
</div>