I have two divs that are placed next to each other (jsfiddle link):

<div class="container" style="display:block;">
            <div class="topLeft" style="border:1px solid red; display:inline-block;" >

                <a  runat="server" href="~/">IMAGE<br> IMAGE</a>
            </div>
            <div class="topRight" style="border:1px solid blue; display:inline-block;">
                <div class="topTop" style="display:block;">%</div>
                <div class="topBottom" style="display:block;">#</div>
            </div>
       </div>

In the example there is no problem, but in my code, the blue div is placed slightly above the red one (visual example [jsfiddle link]):

<div class="container" style="display:block; margin-top:20px;">
            <div class="topLeft" style="border:1px solid red;  display:inline-block;" >

                <a  runat="server" href="~/">IMAGE<br> IMAGE</a>
            </div>

       </div><div class="topRight" style="border:1px solid blue; position:absolute; margin-left:60px; margin-top:-50px; display:inline-block;">
                <div class="topTop" style="display:block;">%</div>
                <div class="topBottom" style="display:block;">#</div>
            </div>

What could be causing this?