css - Foundation big spaces on columns if the side column height is long -

good day guys. i've been trying hours regarding problem. wanted achieve large column position stated below i'm getting else.

   medium               large                  [       ]  |  [       ][         ]  |  [       ][         ]  ---------   |   --------- [    b    ]  |             [    b    ] [    b    ]  |  [         ][         ]  |             [         ]  ---------   |  [    c    ] ---------   |   ---------  --------- [    c    ]  |  [         ][    d    ]  |  [         ][    d    ]  ---------   |  [         ]             |  [    c    ] [    d    ]  |                          |  [         ]              |                          |  [         ] 

as can see there large gap between , c in large screen. wanted c go , take blank spaces without using hacks as possible.

here code have tried.

<div class="row profile align-top">     <div id="a" class="column small-12 large-8">         .....     </div>      <div id="b" class="column small-12 large-4">         ....     </div>      <div id="c" class="column small-12 large-8">         ....     </div>      <div id="d" class="column small-12 large-4">         .....     </div> </div> 

thanks guys!

edit:

adds jfiddle example: https://jsfiddle.net/k18zw694/2/

ok have different. nest columns in other columns 1 left , 1 right.

   <div class="left column small-12 large-6"><!-content here--></div>     <div class="right column small-12 large-6"><!-content here--></div>  

updated fiddle