<div class="hierarchy">
    <div class="content-preview">
        @for($i = 0; $i < 4; $i++)
            <ul class="column">
                @for($j = 0; $j <= rand(1,2); $j++)
                <?php $size = rand(1,2) ?>
                <li class="size-{{$size}}" data-size="{{$size}}">
                    Content
                    <div class="row-options">
                        <span class="js-size-action" data-action="bigger">+</span>
                        <span class="js-size-action" data-action="smaller">-</span>
                    </div>
                </li>
                @endfor
            </ul>
        @endfor
    </div>
</div>

<style>
    .hierarchy{
        margin-top: 20px;
        display: block;
    }

    .hierarchy * { box-sizing: border-box; }

    .content-preview{
        border-radius: 4px;
        width: 1002px;
        background: #ccc;
        overflow: hidden;
        border: 1px solid #888;
    }

    .content-preview ul{
        padding: 0;
        margin: 0;
        list-style: none;
        float: left;
        width: 250px;
        vertical-align: top;
        height: 500px;
        border-right: 1px solid #888;
    }

    .content-preview ul:last-child{
        border-right: none;
    }

    .content-preview li{
        height: 100px;
        background: #bbb;
        padding: 5px;
        margin: 0;
        box-shadow: 0 1px 0 red;
        position: relative;
    }

    .content-preview li:after{
        content: '';
        width: 100%;
        height: 1px;
        background: #888;
        left: 0;
        position: absolute;
        bottom: -1px;
        z-index: 2;
    }

    .row-options{
        font-size: 24px;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .content-preview li.size-2{ height: 200px; }
    .content-preview li.size-3{ height: 300px; }
    .content-preview li.size-4{ height: 400px; }
    .content-preview li.size-5{ height: 500px; }
</style>

<script>
    (function($){
        var maxSize = 5;

        function updateColumnTotal(){
            $('.column').each(function(){
                var columnTotal = 0;
                $(this).find('li').each(function(){
                    columnTotal = columnTotal + parseInt($(this).data('size'));
                });
                $(this).data('total', columnTotal);
                console.log(columnTotal)
            });
        }
        updateColumnTotal();

        $('.js-size-action').click(function(){
            var $this = $(this);
            var $li = $this.closest('li');
            var $column = $this.closest('ul');

            var action = $this.data('action');
            var size = $li.data('size')

            if(action == 'bigger'){
                size++
                if($column.data('total') + 1 > maxSize){
                    alert('Too Big')
                    return;
                }
            }

            if(action == 'smaller'){
                size--;
                if(size == 0){
                    alert('Too Small')
                    return;
                }
            }

            $li.data('size', size);
            $li.attr('class', '').addClass('size-'+size);
            updateColumnTotal();
        });
    })(jQuery)
</script>