<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 flex"> <div class="note"> <div class="note-topic grn"> My Project <span class="close"></span> </div> <div class="note-body"> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test </div> </div> <div class="note"> <div class="note-topic org">Test</div> <div class="note-body"> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test<br> - test </div> </div> </div>

.note { border: 1px solid #ddd; width: 300px; height: 300px; position: relative; margin-right: 5px; box-shadow: 0 -1px 9px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,0.1); } .note-topic { width: calc(100% - 20px); height: 50px; border-radius: 5px; position: absolute; top: -25px; margin-left: 10px; text-align: center; color: #fff; font-size: 30px; font-weight: 500; } .org { background-color: orange; } .grn { background-color: #4ce600; } .note-body { margin-top: 30px; padding: 0 10px; overflow-y: auto; height: 230px; } .close { margin-right: 3px; float: right; } .container { padding: 30px; } .flex { display: flex; } ::-webkit-scrollbar { width: 8px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; }