Center one of the two children inside the parent

Question

I am having issues building a footer. I have a parent div and two children inside it. What I want is for the first to be positioned left and the second to be positioned next to it in the center of the parent div.

I have tried using flexbox, and have tried adding a hidden 3rd element on the right. However this is obviously not ideal because if the elements are not the same size, the positioning will get messed up.

What is a responsive solution to this?

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.hidden-right-element {
  width: 100px;
}

<div class="footer">
  <div class="left-element">
    Left Element
  </div>
  <div class="center-element">
    Center Element
  </div>
  <div class="hidden-right-element">
  </div>
</div>