<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="mob"> <div class="container"> <div class="row"> <div class="history_wrap"> <div class="history_list"> <div class="history_item_name"> <span class="item">Deisgner Saree 129</span> <span class="item">Readymade CHUDIDHAR 002</span> <span class="item">Kasturta pattu Saree 9761</span> <span class="item">Deisgner Saree 129</span> </div> <div class="history_rate"> <span class="rate"> 12000.00 </span> <span class="rate"> 12000.00 </span> <span class="rate"> 12000.00 </span> <span class="rate"> 12000.00 </span> </div> <div class="history_status"> <span class="label label-success">Completed</span> <span class="history_total"><b>Total :</b>10000</span> </div> </div> <div class="history_list"> <div class="history_item_name"> <span class="item">Deisgner Saree 129</span> <span class="item">Readymade CHUDIDHAR 002</span> <span class="item">Kasturta pattu Saree 9761</span> <span class="item">Deisgner Saree 129</span> </div> <div class="history_rate"> <span class="rate"> 12000.00 </span> <span class="rate"> 12000.00 </span> <span class="rate"> 12000.00 </span> <span class="rate"> 12000.00 </span> </div> <div class="history_status"> <span class="label label-success">Completed</span> <span class="history_total"><b>Total :</b>10000</span> </div> </div> <div class="history_list"> <div class="history_item_name"> <span class="item">Deisgner Saree 129</span> <span class="item">Readymade CHUDIDHAR 002</span> <span class="item">Kasturta pattu Saree 9761</span> <span class="item">Deisgner Saree 129</span> </div> <div class="history_rate"> <span class="rate"> 12000.00 </span> <span class="rate"> 12000.00 </span> <span class="rate"> 12000.00 </span> <span class="rate"> 12000.00 </span> </div> <div class="history_status"> <span class="label label-success">Completed</span> <span class="history_total"><b>Total :</b>10000</span> </div> </div> <div class="history_list"> <div class="history_item_name"> <span class="item">Deisgner Saree 129</span> <span class="item">Readymade CHUDIDHAR 002</span> <span class="item">Kasturta pattu Saree 9761</span> <span class="item">Deisgner Saree 129</span> </div> <div class="history_rate"> <span class="rate"> 12000.00 </span> <span class="rate"> 12000.00 </span> <span class="rate"> 12000.00 </span> <span class="rate"> 12000.00 </span> </div> <div class="history_status"> <span class="label label-success">Completed</span> <span class="history_total"><b>Total :</b>10000</span> </div> </div> <div class="history_list"> <div class="history_item_name"> <span class="item">Deisgner Saree 129</span> <span class="item">Readymade CHUDIDHAR 002</span> <span class="item">Kasturta pattu Saree 9761</span> <span class="item">Deisgner Saree 129</span> </div> <div class="history_rate"> <span class="rate"> 12000.00 </span> <span class="rate"> 12000.00 </span> <span class="rate"> 12000.00 </span> <span class="rate"> 12000.00 </span> </div> <div class="history_status"> <span class="label label-success">Completed</span> <span class="history_total"><b>Total :</b>10000</span> </div> </div> </div> </div> </div> </div>

.mob {width:400px; margin:20px auto; padding:10px;} .history_wrap{width:100%; float:left; height:auto; padding:10px;} .history_list{float:left; width:100%; margin:10px 0px; box-shadow:0 0 3px #aaa;} .history_item_name{float:left; width:70%; padding:0px 10px; } .history_item_name span.item{width:100%;float:left;} .history_rate{float:left; width:30%; text-align:right; padding:0 10px;} .history_status{float:left; width:100%;border-top:1px solid rgba(0,0,0,0.2);padding:5px 10px;} .history_status .label{float:left;} .history_total{float:right;}