JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<div id="container">
        </div>
		<div id="container2">
        </div>
		
            <div class="content" style="height:200px">
				This is big
            </div>
			
            <div class="content">
				Hi there
            </div>
            <div class="content" style="height:200px">
				so is this
            </div>
            <div class="content">
				hello world
            </div>
            <div class="content" style="height:200px">
				me too
            </div>
            <div class="content">
				5867
            </div>
            <div class="content" style="height:200px">
				ditto
            </div>
			
            <div class="content">
				4321
            </div>

CSS

#container{
    width:150px;
    height:auto;
    margin-top:50px;
    position:absolute;
    border: 1px rgba(0,0,0,.4) solid;
    background:#fff;
    padding-bottom:25px;
}
#container2{
    width:150px;
    height:auto;
    margin-top:50px;
    position:absolute;
    border: 1px rgba(0,0,0,.4) solid;
    background:#fff;
    margin-left:200px;
    padding-bottom:25px;
    background-color:yellow;
}
.content{
    position:relative;
    margin-left:25px;
    margin-top:25px;
    background:#666;
    display:none;
}

JavaScript

$(document).ready(function(){
    $(".content").each(function(){
        if($(this).height() > 100)
        {
            $(this).appendTo("#container");
            $(this).show();
        } else {
            $(this).appendTo("#container2");
            $(this).show();
        }
    });
});