

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <div class="container d-flex justify-content-center">

    <ul class="list-group mt-5 text-white">
      <li class="list-group-item d-flex justify-content-between align-content-center">

          <div class="d-flex flex-row">
            
              <div class="ml-2">
                  <h4 class="mb-0">Route 1</h4>
                  <div class="about">
                      
                      <span>Jan 21, 2020</span>
                  </div>
              </div>
          </div>
          

      </li>

      <li class="list-group-item d-flex justify-content-between align-content-center">

          <div class="d-flex flex-row">
              <div class="ml-2">
                  <h4 class="mb-0">Route 2</h4>
                  <div class="about">
                    
                      <span>Jan 22, 2020</span>
                  </div>
              </div>
          </div>
          

      </li>
      
    </ul>
    
    </div>

  <style>
body{
	background: #e68a43;
}
ul{
    list-style-type: none;
}

.list-group{
	width: 250px !important;

}

.list-group-item{
	margin-top:16px;
	border-radius: none; 
	background: #e68a43;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}


.list-group-item:hover{
	transform: scaleX(1.1);
}

.check{
	opacity: 0;
	transition: all 0.6s ease-in-out;
}

.list-group-item:hover .check {
	opacity: 1;

}

.about span{
	font-size: 16px;
	margin-right: 10px;

}

  </style>