Flex Equal Width

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="site-footer">
    <div class="row">
       <div class="col-lg-6">
    	   <p class="box-1">
    	    You can visit us at <span class="link-webiste" style="size: 70px !important;">agoodtreeproduction.com</span></p>
       </div>
       <div class="col-lg-6">
           <h3 style="color: white;"> Around The Web</h3>
           <ul class="list-inline">
           <li class="footer-elements">
    	      <a href="#" class=""><i class="fa fa-facebook btn-outline icon" aria-hidden="true">rgr</i></a>
    	   </li>
    	   <li class="footer-elements">
    	      <a href="#" class=""><i class="fa fa-twitter btn-outline icon" aria-hidden="true">grg</i></a>
    	   </li>
    	   <li class="footer-elements">
    	      <a href="#" class=""><i class="fa fa-google-plus btn-outline icon" aria-hidden="true">erg</i></a>
    	   </li>
    	   <li class="footer-elements">
    	      <a href="#" class=""><i class="fa fa-linkedin btn-outline icon" aria-hidden="true">ttt</i></a>
    	   </li>
    	  </ul>
       </div>
    </div>
 </div>

CSS

/*
* {
  box-sizing: border-box;
}
*/

li {
  display: inline;
}
.site-footer{
  background-color: #6E2607;
  //display: flex;
}
.box{
  height:100px;
  min-width: 200px;
}
.One{
 //background-color: blue;
 
}

.two{
 //background-color: yellow;
 
}

.box-1{
  color: white !important;

}
.list-inline {
  display: flex;
}
.footer-elements{
  
  padding: 20px;
  flex-grow: 1;
  flex-basis: 0;
}

.footer-elements a {
  text-align: center;
  
}

.icon{
  font-size: 30px !important;
}


.btn-outline{  
  color:#fff;
  background:0;
  border-style:solid;
  border-radius:50%;
  
  /* could consider removing this, and using the * selector, for the full project*/
  box-sizing: border-box;
  
  transition: background-color 0.7s ease-in-out;
  margin-top: 5px;
  padding: 25px;
  width: 100%;
}

 .btn-outline:hover{
  background-color: #000000;
 }