Left align one element and center another element in div

Question

I can't seem to get one element to be aligned to the left, and another to be aligned to the center within a div.

However, this aligns both elements to the center. How do I align the Facebook icon to the left, while centering the p element?

.panel-footer {
  text-align: center;
}

.panel-footer .fa-facebook {
  text-align: left;
}

.panel-footer p {
  display: inline-block;
  font-size: medium;
}

<div class="panel-footer">
  <a href="https://www.facebook.com/pg/facebook" target="_blank" class="fa fa-facebook"></a>
  <p>This website is made by ME!</p>
</div>

Answer 1

I would use flexbox for this:

.panel-footer {
  display:flex;
  flex-wrap:nowrap;
  align-items:center; /* vertical align */
}

.panel-footer p {
  flex-grow:1;       /* take up rest of line */
  text-align:center; /* centre text in p */
}

<div class="panel-footer">
  <a href="https://www.facebook.com/pg/facebook" target="_blank" class="fa fa-facebook">left</a>
  <p>This website is made by ME!</p>
</div>

Answer 2

Absolute position the facebook icon. Make sure you leave enough padding to the left of the p element to account for it (so that the p text doesn't overlap it). Make the padding is equal on both sides to make sure you p text doesn't overlap and it's still perfectly horizontally centered inside .panel-footer

.panel-footer {
  text-align: center;
  position: relative;
}

.panel-footer .fa-facebook {
   position: absolute;
   left:0;
   /* vertically center the icon */
   top: 50%; transform: translateY(-50%);
}

.panel-footer p {
  font-size: medium;
  padding: 0 20px; /* leave space for the icon adjust this value depending on how big your icon is */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="panel-footer">
  <a href="https://www.facebook.com/pg/facebook" target="_blank" class="fa fa-facebook"></a>
  <p>This website is made by ME!</p>
</div>