<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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"> <div class="row"> <div class="card col-sm-4 " style="overflow:scroll;"> <ul class="list-group list-group-flush"> <li class="list-group-item"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Name</h5> </div> <p>Last msg</p> </li> <li class="list-group-item"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Name</h5> </div> <p>Last msg</p> </li> <li class="list-group-item"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Name</h5> </div> <p>Last msg</p> </li> <li class="list-group-item"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Name</h5> </div> <p>Last msg</p> </li> <li class="list-group-item"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Name</h5> </div> <p>Last msg</p> </li> <li class="list-group-item"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Name</h5> </div> <p>Last msg</p> </li> <li class="list-group-item"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Name</h5> </div> <p>Last msg</p> </li> <li class="list-group-item"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Name</h5> </div> <p>Last msg</p> </li> <li class="list-group-item"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Name</h5> </div> <p>Last msg</p> </li> <li class="list-group-item"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Name</h5> </div> <p>Last msg</p> </li> <li class="list-group-item"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Name</h5> </div> <p>Last msg</p> </li> </ul> </div> <div class="col-sm-8"> <div class="chatbody"> <table class="table"> <tr> <td>message</td> <td>time</td> </tr> </table> </div> <div class="row"> <div class="col-xs-9"> <input type="text" placeholder="Message..." class="form-control" [(ngModel)]="message" /> </div> <div class="col-xs-3"> <button class="btn btn-info btn-block" (click)="">Send</button> </div> </div> </div> </div> </div>

.chatperson{ display: block; border-bottom: 1px solid #eee; width: 100%; display: flex; align-items: center; white-space: nowrap; overflow: hidden; margin-bottom: 15px; padding: 4px; } .chatperson:hover{ text-decoration: none; border-bottom: 1px solid orange; } .namechat { display: inline-block; vertical-align: middle; } .chatperson .chatimg img{ width: 40px; height: 40px; background-image: url('http://i.imgur.com/JqEuJ6t.png'); } .chatperson .pname{ font-size: 18px; padding-left: 5px; } .chatperson .lastmsg{ font-size: 12px; padding-left: 5px; color: #ccc; } .limit-item { height: 50%;