Как центрировать элемент относительно другого

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.elements-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
}

.element-wrap {
  display: flex;
}

.container-element-1 {
  justify-content: flex-end;
  flex-grow: 1;
  /*определяет, сколько простанства flex-элемент будет занимать в контейнере flex*/
  /*поиграйтесь со значениям 0, 1, 2 и т.д., чтобы понять, как это работает*/
}

.container-element-2 {
  justify-content: center;
  flex-grow: 1;
}

.element-1,
.element-2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.element-1 {
  width: 200px;
  height: 60px;
  background-color: grey;
}

.element-2 {
  width: 100px;
  height: 30px;
  background-color: grey;
}

<div class="elements-wrapper">
  <div class="element-wrap container-element-1">
    <div class="element-1">Element 1</div>
  </div>
  <div class="element-wrap container-element-2">
    <div class="element-2">Element 2</div>
  </div>
</div>