JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <br>
    <br>  
    <div class="box">
      <div></div>
      <h2>Or</h2>
      <div></div>
    </div>
  </body>
</html>

CSS

.box {
  /* basic styling */
  width: 80%;
  height: 95px;
  /*border: 1px solid #555;*/
  font: 14px Arial;

  /* flexbox setup */
  display: -webkit-box;
  -webkit-box-orient: horizontal;

  display: -moz-box;
  -moz-box-orient: horizontal;

  display: box;
  box-orient: horizontal;
}

.box > div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;

  -moz-transition: width 0.7s ease-out;
  -o-transition: width 0.7s ease-out;
  -webkit-transition: width 0.7s ease-out;
  transition: width 0.7s ease-out;
}

/* our colors */
.box > div:nth-child(1){ 
        height:1px;
        margin-top:6px;
        margin-right:14px;
        background: rgb(126,126,126);
        background: -moz-linear-gradient(right,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
        background: -webkit-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
        background: -o-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
        background: -ms-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
        background: linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
        left: 0;
}
.box > div:nth-child(2){ 
    
}

.box > div:nth-child(3){ 
        height:1px;
        margin-top:6px; 
        margin-left:14px;
        background: rgb(126,126,126);
        background: -moz-linear-gradient(left,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
        background: -webkit-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
        background: -o-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
        background: -ms-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
        background: linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
        right: 0;
}


.box > div:hover { 
  width: 200px;
}