Margin for element in div with display: table-cell moves content to another cell

I have a Frontal following simple layout: http://jsfiddle.net/656ckfyq/

  <div class="container">
        <div>
           Some jumping conten  here
        </div>
        <div>
            <a href="#" class="more">More</a>
        </div>          
   </div>

      

        
        
        
      

    

and these are the styles for him

    .container {
        display: table;
        border: 1px silver solid;
     }

     .container div {
         display: table-cell;
         padding: 10px;
     }

    .more {
        display: block;
        border: 2px red solid;
        margin-top: 20px;
     }

      

        
        
        
      

    

So the problem is I only want to move the link in the second cell 20px down. But somehow it also affects the content in the first cell.

So what is the reason for this behavior and how can I fix it?