<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-7"> <div class="history_wrapper"> <div class="history_header"> <div class="history_header_product"> Product </div> <div class="history_header_quantity"> Quantity </div> <div class="history_header_size"> Size </div> <div class="history_header_date"> Date </div> </div> <div class="history_body"> <div class="history_list"> <div class="history_item_name"> <span class="item_name"> DESIGNER SAREES 001 </span> <span class="item_name"> DESIGNER SAREES 001 </span> <span class="item_name"> DESIGNER SAREES 001 </span> </div> <div class="history_item_quantity"> <span class="item_quantity"> 1 </span> <span class="item_quantity"> 6 </span> <span class="item_quantity"> 3 </span> </div> <div class="history_item_size"> <span class="item_size"> XL </span> <span class="item_size"> M </span> <span class="item_size"> XXL </span> </div> <div class="history_item_date"> <span class="item_date"> 23-jun-2017 </span> </div> <div class="history_list_footer"> <span class="label label-success">Completed</span> <span class="histroy_total"><b>Total : </b>230907</span> </div> </div> </div> </div> </div> </div> </div>

.history_wrapper{float:left; width:100%; display:block; box-shadow:0 0 5px #aaa;} .history_header,.history_body{float:left; width:100%;} .history_list{float:left; width:100%; border-top:1px solid rgba(0,0,0,0.3);border-bottom:1px solid rgba(0,0,0,0.3); padding:0px 5px;} .history_header .history_header_product{float:left; width:40%; padding:0 10px; font-size:20px; text-align:left; } .history_header .history_header_quantity{float:left; width:20%; padding:0 10px; font-size:20px; text-align:left; } .history_header .history_header_size{float:left; width:20%; padding:0 10px; font-size:20px; text-align:left; } .history_header .history_header_date{float:left; width:20%; padding:0 10px; font-size:20px; text-align:left; } .history_item_name{text-align:left; width:40%; float:left;} .history_item_name span.item_name{float:left; width:100%; padding:10px 0px;} .history_item_quantity,.history_item_size{float:left; width:20%;} .history_item_quantity span.item_quantity,.history_item_size span.item_size{ text-align:center; padding:10px 0; float:left; width:100%;} .history_item_date{float:left; width:20%;} .history_item_date span.item_date{float:left; width:100%;} .history_list_footer{float:left; width:100%;border-top:1px solid rgba(0,0,0,0.2); padding:10px 0px;} .history_list_footer .label{float:left;} .histroy date{float:left; font-weight:600;} .histroy_total{float:right;}