<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="manage-invitation-section"> <div class="row"> <p>Du hast <span>4</span>Einladungen geschickt</p> <div class="col-md-12 vouchers-listing"> <ul class="list-unstyled"> <li class="row"> <div class="col-md-2 customer-name"> <label> Kristen Glockner </label> </div> <div class="col-md-4 customer-mail-address"> <p>KristenGlocjkner@teleworms.us</p> <span>Gesendet am 07.06.2017</span> </div> <div class="col-md-4 vouchers-details"> <span>voucher redeemed </span> <a href="javascript:void(0)" title="voucher"> <img src="#" alt="voucher-icon"/> </a> <p class="expiry-info"> Expiry on <span>10 Aug 2017</span> </p> </div> <div class="col-md-2 vouchers-acceptance"> <span class="accepted"> AKZEPTIERT </span> </div> </li> </ul> </div> </div> </div> </div> </div>

.vouchers-listing{ padding:0; padding-top:25px; } ul li{ border-top:1px solid #808080; padding:25px 0 20px 0; vertical-align:middle; } ul li:last-child{ border-bottom:1px solid #808080; } .customer-name label{ font-family: Georgia; color: #010c12; font-size: 14px; font-weight: 700; line-height: 20px; text-align: left; width:66px; } .customer-mail-address p{ margin:0; font-family: Georgia; color: #333333; font-size: 14px; font-weight: 700; text-align: left; } .customer-mail-address span{ font-family: Verdana; color: #333333; font-size: 13px; font-weight: 400; text-align: left; display:block; } .vouchers-details{ text-align:left; } .vouchers-details span{ font-family: Verdana; color: #949494; font-size: 12px; font-weight: 400; text-align: left; display:inline-block; margin-right:15px; } .vochers-details img{ width: 35px; height: 27px; vertical-align:middle; display:inline-block; } .vouchers-details .expiry-info{ display:inline-block; width:80px; font-family: Verdana; color: #333333; font-size: 12px; font-weight: 400; text-align: left; margin-left:5px; vertical-align:top; } .expiry-info span{ display:block; width:100%; float:left; } .vouchers-acceptance{ float:right!important; } .vouchers-acceptance span{ font-family: Georgia; color: #51862a; font-size: 12px; font-weight: 700; text-align:right; } .vouchers-acceptance span:before{ content:"tick"; border-radius: 100%; border-style: solid; border-width: 2px; border-color: #ffffff; background-color: #51862a; width: 16px; height: 16px; margin-right:10px; }