JSFiddle - React, Tailwind, and code Playground
HTML
<div id='content'>
<div class="drag_box box-min-2 ui-droppable">
<div class="hd-b">Interested(0)</div>
<div class="box-tx">
<div box_num="2" class="draggable-list main_box">
<div id="yw2" class="list-view">
<div class="items ui-sortable">
<span class="empty ui-sortable-handle"></span></div></div>
</div>
</div>
</div>
<div class="drag_box box-min-2 ui-droppable">
<div class="hd-b">Interested(0)</div>
<div class="box-tx">
<div box_num="2" class="draggable-list main_box">
<div id="yw2" class="list-view">
<div class="items ui-sortable">
<span class="empty ui-sortable-handle"></span></div></div>
</div>
</div>
</div>
<div class="drag_box box-min-2 ui-droppable">
<div class="hd-b">Interested(0)</div>
<div class="box-tx">
<div box_num="2" class="draggable-list main_box">
<div id="yw2" class="list-view">
<div class="items ui-sortable">
<span class="empty ui-sortable-handle"></span></div></div>
</div>
</div>
</div>
<div class="drag_box box-min-2 ui-droppable">
<div class="hd-b">Interested(0)</div>
<div class="box-tx">
<div box_num="2" class="draggable-list main_box">
<div id="yw2" class="list-view">
<div class="items ui-sortable">
<span class="empty ui-sortable-handle"></span></div></div>
</div>
</div>
</div>
</div>
CSS
#content {
background: none repeat scroll 0 0 #fff;
border: 1px solid #d5d5d5;
padding: 20px;
margin-top: 20px;
display: table;
width: 957px;
}
.hd-b {
font: 16px Arial, Helvetica, sans-serif;
color: #356aa0;
background: #fff;
margin: 2px 2px 0 2px;
text-align: center;
padding: 6px 0;
float: left;
width: 98%;
}
.box-tx {
background: #fff;
margin: 2px;
padding: 6px 0;
float: left;
width: 98%;
overflow-y: scroll;
overflow-x: hidden;
height: 250px;
}
.box-min-2 {
float: left;
width: 19%;
background: black;
margin-right: 10px;
}