JSFiddle - React, Tailwind, and code Playground

by dfygrvty

HTML

<div class="v-main-container">
    <div class="v-section">
			<div class="v-section-toolbar v-clearfix">
				<div>
					<a href="#" class="v-btn v-btn-mini v-c-move v-section-dragger" title="Move section"><span class="v-glyphicons-empty glyphicons move"><i></i></span></a>
				</div>
				
				<div>
					<a href="#" class="v-btn v-btn-mini" title="Remove section"><span class="v-glyphicons-empty glyphicons remove_2"><i></i></span></a>
				</div>
			</div>
			
			<div class="v-content-container v-row-fluid">
				<div class="v-span6">
                    <p>hello1</p>
				</div>
				<div class="v-span6">
				<p>hello2</p>
				</div>
			</div>
		</div>
    <div class="v-section">
			<div class="v-section-toolbar v-clearfix">
				<div class="v-left">
					<a href="#" class="v-btn v-btn-mini v-c-move v-section-dragger" title="Move section"><span class="v-glyphicons-empty glyphicons move"><i></i></span></a>
				</div>
				
				<div class="v-right">
					<a href="#" class="v-btn v-btn-mini" title="Remove section"><span class="v-glyphicons-empty glyphicons remove_2"><i></i></span></a>
				</div>
			</div>
			
			<div class="v-content-container v-row-fluid">
				<div class="v-span6">
				<p>hello3</p>
				</div>
				<div class="v-span6">
				<p>hello4</p>
				</div>
			</div>
		</div>
    <div class="v-section">
			<div class="v-section-toolbar v-clearfix">
				<div class="v-left">
					<a href="#" class="v-btn v-btn-mini v-c-move v-section-dragger" title="Move section"><span class="v-glyphicons-empty glyphicons move"><i></i></span></a>
				</div>
				
				<div class="v-right">
					<a href="#" class="v-btn v-btn-mini" title="Remove section"><span class="v-glyphicons-empty glyphicons remove_2"><i></i></span></a>
				</div>
			</div>
			
			<div class="v-content-container v-row-fluid">
				<div class="v-span6">
				<p>hello5</p>
				</div>
				<div class="v-span6">
				<p>hello6</p>
				</div>
			</div>
		</div>
</div>

CSS

div.v-content-container{
    clear:both;
}
div.v-content-container > div{
    float:left;
}

JavaScript

jQuery( document ).ready( function() {
    
    $( '.v-content-container' ).sortable({
		placeholder : 'v-column-placeholder',
		start       : function( e, ui ){
			//ui.placeholder.width( ui.item.width() );
			//ui.placeholder.height( ui.item.height() );
		}
	});

});