masonry

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.1/masonry.pkgd.js"></script>
<div class="container motherContainer">    
    <div class="eWrapper">
        <div class="element A">
            
            <div class="container">
                <div class="eWrapper"><div class="element B">N</div></div>
                <div class="eWrapper"><div class="element B">N<br>K<br>DD</div></div>
                <div class="eWrapper"><div class="element B">NDDAD</div></div>
            </div>
            
        </div>
    </div>
            
    <div class="eWrapper">
        <div class="element A">
            <div class="container">
                <div class="eWrapper"><div class="element B">
                                          <div class="container">
                                              <div class="eWrapper"><div class="element C">N</div></div>
                                              <div class="eWrapper"><div class="element C">NDDAD</div></div>
                                          </div>
                                      </div></div>
                <div class="eWrapper"><div class="element B">N<br>K<br>DD</div></div>
                <div class="eWrapper"><div class="element B">N</div></div>
            </div>
            
        </div>
    </div>
    
    <div class="eWrapper">
        <div class="element A">
            <div class="container">
                <div class="eWrapper"><div class="element B">N</div></div>
                <div class="eWrapper">
                    <div class="element B">
                        <div class="container">
                            <div class="eWrapper"><div class="element C">N</div></div>
                            <div class="eWrapper"><div class="element C">N<br>K<br>DD</div></div>
                            <div class="eWrapper"><div class="element C">NDDAD</div></div>
                        </div>
                    </div>
                    
                </div>
       ...

CSS

*{
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box
}

.motherContainer{
    width:400px !important;
    background:black;
}

.container{
    /* background: rgba(0,0,255,0.9); /*  BLUE */
    width:100%;
}

.eWrapper{
    /* background: rgba(255,0,0,0.1);  RED */
    width:50%;
   /*  padding:0px 10px 2px 0px; */
    padding:10px;
   
}
.element{
     overflow: hidden;
}
.element.A{
    background:green;
}
.element.B{
    background:red;
}
.element.C{
    background:yellow;
}

JavaScript

var $container = $('.container');
$($container.get().reverse()).masonry({
    /*columnWidth: 200,*/
   // itemSelector: '.eWrapper'
});

// PROBLEM: column width needs to be different every time