<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <div class="left"> <ul class="nav"> <li class="item"> <a class="nav-item active" href="#Tab1" data-toggle="tab" role="tab"> <span class="fa fa-align-justify p-l-2"></span> Tab1 </a> </li> <li class="item"> <a class="nav-item" href="#Tab2" data-toggle="tab" role="tab"> <span class="fa fa-align-justify p-l-2"></span> Tab2 </a> </li> <li class="item"> <a class="nav-item" href="#Tab3" data-toggle="tab" role="tab"> <span class="fa fa-align-justify p-l-2"></span> Tab3 </a> </li> </ul> </div> <div class="right tab-content rounded-right col-lg-12 p-l-0 p-t-0 border-0 scrollable-auto-y"> <div class="tab-pane active Content text-center" id="Tab1" role="tabpanel"> This is Tab 1 </div> <div class="tab-pane Content" id="Tab2" role="tabpanel"> This is Tab 2 </div> <div class="tab-pane Content" id="Tab3" role="tabpanel"> This is Tab 3 </div> </div>

.left, .right { float: left; height: 100vh; } .left { background: #292929; display: inline-block; white-space: nowrap; width: 40px; padding:25px; transition: width 1s; } .right { background: #e6e6e6; width: 350px; transition: width 1s; border-style: solid; border-color: #ccc; border-width: 1px; } .left:hover { width: 250px; } .item:hover { background-color: #191919; } .item { height: 50px; overflow: hidden; color: #fff; } .right.extend { padding-top: 60%; background: #292929; transition: width 1s; width: 450px; height: 450px; } .right.extend.hidden { display: none; }