JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

HTML

<div class="navigatorParent">
  <div class="leftNav">&#8249;</div>
  <div class="divider"></div>
  <div class="rightNav">&#8250;</div>
</div>

CSS

.navigatorParent{
    width: 70px;
    display: flex;
    height: 50px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.navigatorParent .leftNav{
  //border-right: 1px solid #999999;
  font-size:30px;
 // flex-grow: 1;
  padding-left:13px;
  padding-top:5px;
  opacity: .5;
  transition: opacity .1s ease-out;
}

.leftNav:hover{
  opacity:1;
  cursor:pointer;
}

.navigatorParent .rightNav{
   font-size:30px;
   //flex-grow: 1;
    font-size:30px;
    flex-grow: 1;
    padding-left:20px;
    padding-top:5px;
    opacity: .5;
    transition: opacity .1s ease-out;
}

.rightNav:hover{
  opacity:1;
  cursor:pointer;
}

.navigatorParent .divider{
    border-right: 1px solid #999999;
    position:relative;
    left:15%;
    top:10%;
    bottom:10%;
}