<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container my-2"> <h1>Leave a Reply</h1> <p>Your email address will not be published. Required fields are marked *</p> <div class="row mt-4"> <div class="col-md-9"> <form class=" reply-form "> <div class="commentBox"> <ul class="list-unstyled"> <li><span class="profileBox">M</span> <span class="profileText">Your email address will not be published.</span></li> <li><span class="profileText">Your email address will not be published. Your email address will not be published. Required fields are marked </span> <span class="profileBox">L</span> </li> <li> <span class="profileBox">M</span> <span class="profileText">Your email address will not be published. Required fields are marked </span> </li> </ul> </div> <div id="div_id_username" class="form-group required"> <div class="controls form-group d-flex w-100 "> <input class="input-md textinput textInput form-control" id="id_username" placeholder="Write your review" type="text" /> <button type="submit" class="btn btn-info border-radius-0 m-0 w-25">POST</button> </div> </div> </form> </div> <div class="col-md-3"> <div class="card"> <h4><i class="fa fa-ticket" aria-hidden="true"></i> Ticket Information</h4> <ul class="list-unstyled"> <li> <p>Your email address will not be published</p> <span class="badge badge-warning">Warning</span> </li> <li> <strong>Department</strong> <p>Support</p> </li> <li> <strong>Submitted</strong> <p>7th August 2020 (05:19 PM)</p> </li> <li> <strong>Last Updated</strong> <p>2 Weeks ago</p> </li> <li> <strong>Priority</strong> <p>High</p> </li> </ul> <div class="row m-0 mb-4"> <div class="col"> <a class="btn btn-success w-100" href="#" role="button"><i class="fa fa-pencil" aria-hidden="true"></i> Reply</a> </div> <div class="col"> <a class="btn btn-danger w-100" href="#" role="button"><i class="fa fa-times" aria-hidden="true"></i> Closed</a> </div> </div> </div> </div> </div> </div>

.reply-form { background: #fff; border:1px solid #eee; padding: 37px; } .textInput { border-radius: 0; height: 45px; margin: 0 !important; } .border-radius-0{ border-radius:0; } .textInput:focus { box-shadow: none; outline: none } .commentBox ul li .profileBox { width: 50px; height: 50px; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; background-color: #002247; color: #fff; font-weight: 700; } .commentBox ul li:nth-child(even) .profileBox { background-color: #222; } .profileText { border-radius: 7px; padding: 10px; position: relative; background-color: #e0efff; display: inline-block; margin-left: 15px; width: 50%; } .profileText::before { content: ''; position: absolute; left: -9px; top: 50%; transform: translateY(-50%); width: 0px; height: 0px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #e0efff; z-index: 1; } .commentBox ul li { display: flex; align-items: center; } .commentBox ul li:nth-child(even) .profileText::before { left: unset; right: -9px; transform: translateY(-50%) rotate(175deg); } .commentBox ul li:nth-child(even) .profileText { text-align: left; } div#div_id_username { margin-top: 5%; } .commentBox ul li:nth-child(even) .profileText { margin-left: 0; margin-right: 15px } .commentBox ul li:nth-child(even) { text-align: right; margin: 20px 0; justify-content: flex-end; } .card h4 { background-color: #f8f8f8; padding: 15px; font-size: 18px } .card ul li:not(:last-child) { border-bottom: 1px solid #f3f3f3; } .card ul li { padding: 10px 15px } .card ul li p { margin: 0 }