How can I correctly align these links?

The Hello bottom on left isn't correct placed, why?

<div style="float: left; width: 45%;text-align:right">
  <a href="lol.html" class="button primary fit" style="width:50%">Hello</a>
  <br/>
  <br/>
  <a href="lol.html" class="button fit" style="width:50%">Hello</a>
</div>
<div style="float: right; width: 45%;text-align:left">
  <a href="lol.html" class="button primary fit" style="width:50%">Hello</a>
  <br/>
  <br/>
  <a href="lol.html" class="button fit" style="width:50%">Hello</a>
</div>

Solution

An a tag automatically added a certain margin after the link automatically, that's whats happening here. Your first anchor tag adds a bit of space that moves the next anchor tag out of place. I've added background color for clarity here, plus a negative margin attribute to the first tag. Hope this helps.

<div style="float: left; width: 45%;text-align:right;background-color:bisque;">
  <a href="lol.html" class="button primary fit" style="width:50%;margin-right:-4px;">Hello</a>
  <br />
  <br />
  <a href="lol.html" class="button fit" style="width:50%;">Hello</a>
</div>
<div style="float: right; width: 45%;text-align:left;background-color:burlywood;">
  <a href="lol.html" class="button primary fit" style="width:50%">Hello</a>
  <br />
  <br />
  <a href="lol.html" class="button fit" style="width:50%">Hello</a>
</div>