dashboard jquery

$(function() {
    $( ".column" ).sortable({
      connectWith: ".column",
      handle: ".portlet-header",
      cancel: ".portlet-toggle",
      placeholder: "portlet-placeholder ui-corner-all"
    });

    $( ".portlet" )
      .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
      .find( ".portlet-header" )
        .addClass( "ui-widget-header ui-corner-all" )
        .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");

    $( ".portlet-toggle" ).click(function() {
      var icon = $( this );
      icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
      icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
    });
 
    $(".dbts tr:odd").addClass("odd");
    $(".dbts tr:even").addClass("even");
 
  });



css

.column {
width: 30%;
float: left;
padding-bottom: 100px;
}
.column.mid4 {
width: 39.9%;
float: left;
padding-bottom: 100px;
}

.portlet {
margin: 1em;
padding: 0.3em;
}

.portlet-header {
padding: 0.5em 0.3em;
margin-bottom: 0.5em;
position: relative;
}

.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}

.portlet-content {
padding: 0.4em;
min-height: 40px;
}

.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}

#dbContent {
overflow: hidden;
width: 100%;
min-width: 1300px;
}

#md {
min-width: 1300px !important;
}

#logo_bar {
min-width: 1300px;
}

.portlet-header.ui-widget-header {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4f5fc+0,9fd8ef+21,9fd8ef+21,52bcea+100 */
background: #e4f5fc; /* Old browsers */
background: -moz-linear-gradient(top, #e4f5fc 0%, #9fd8ef 21%, #9fd8ef 21%, #52bcea
100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4f5fc),
color-stop(21%, #9fd8ef), color-stop(21%, #9fd8ef),
color-stop(100%, #52bcea) ); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e4f5fc 0%, #9fd8ef 21%, #9fd8ef 21%,
#52bcea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e4f5fc 0%, #9fd8ef 21%, #9fd8ef 21%, #52bcea
100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e4f5fc 0%, #9fd8ef 21%, #9fd8ef 21%, #52bcea
100%); /* IE10+ */
background: linear-gradient(to bottom, #e4f5fc 0%, #9fd8ef 21%, #9fd8ef 21%, #52bcea
100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(  startColorstr='#e4f5fc',
endColorstr='#52bcea', GradientType=0 ); /* IE6-9 */
/* color:white;  */
zoom: 1;
}

.dbts {
text-align: left;
width: 100%;
border: 1px solid #D2D2D6;
font-family: Arial;
font-size: 1em;
}

.dbts tr.odd {
color: #000;
background: #EFE9E9;
}

.dbts td { /* width:50%; */
   border: 1px solid #D8D4D4;
}

.dbts th {
background: #70838C;
padding: 0.3em 0em;
color: white;
text-align: left;
}

.dbts td,.dbts th {
padding: 0.3em;
}

.dbts.approv td { /* width:33.3%; */

}

.tot {
font-weight: bold;
}

.dbts tr.gtot.odd,.dbts tr.gtot.even {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c2abc9+0,b297aa+59 */
background: #FCFF8F;
zoom:1;
border: 1px solid #D4C7C7;
font-weight: bold;
}

.dbts tr.stot.odd,.dbts tr.stot.even {
background: #CDECEC;
border: 1px solid #D4C7C7;
font-weight: bold;
}

.ui-widget{
font-size:1em;
}

html example

<div class="column">

  <div class="portlet">
    <div class="portlet-header">Claims[As of 01/01/2016 05:00 AM]</div>
    <div class="portlet-content">

<table class="dbts">
<tr><th>Description</th><th>Values</th></tr>
<tr>
<td>Total Number of claims <br> (Accepted + Pended):</td>
<td>1000</td>
</tr>
<tr>
<td>Total Number of claims in Pend Queue</td>
<td>100</td>
</tr>
<tr>
<td>Total liability Amount in claims</td>
<td>$100</td>
</tr>
</table>


</div>
  </div>
</div>
<div class="column mid4">
</div>.....