<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 style="width:50%; margin:10% auto; height:auto; box-shadow:0 0 2px #aaa;"> <div style="width:100%; padding:10px; text-align:center; font-weight:600;"> <h2 style="text-align:center;">Invoice</h2> </div> <div style="margin:10px 15px; float:left; width:90%; border-top:1px solid rgba(0,0,0,0.2);"></div> <div style="width:100%; display:flex;justify-content:space-between ;"> <div style="flex:1;flex-basis:50%; padding:0 15px;"> <b>Reciept</b> <p>Session With Nagoor Haneefa</p> <p>Session With Nagoor Haneefa</p> <p>Session With Nagoor Haneefa</p> </div> <div style="flex:2; flex-basis:50%; padding:0 15px;"> <b>Date</b> <p>2-4-2017</p> <p>2-4-2017</p> <p>2-4-2017</p> </div> </div> <div style="margin:10px 15px; float:left; width:90%; border-top:1px solid rgba(0,0,0,0.2);"></div> <div style="width:100%; display:flex;justify-content:space-between ;"> <div style="flex:1;flex-basis:60%; padding:0 15px;"> <p>Session With Nagoor Haneefa</p> </div> <div style="flex:1;flex-basis:60%; padding:0 15px;"> <p>2-4-2017</p> </div> </div> <div style="width:100%"> <div style=" display:flex;justify-content:space-between ;"> <div style="float:left;width:50%; padding:0 15px;"> <p> Invoice Number</p> <p> Transfer Number</p> </div> <div style="float:left;width:50%; word-wrap: break-word; text-align:left; padding:0 15px;"> <p>145879808700</p> <p>trans_89789138898kjjqwe9sz9d9s8sau790987a8s7d980sau70sa</p> </div> </div> </div> </div> </div> </div>