Como adicionar elementos em torno de um elemento já justificado no centro?

Eu criei um formulário com alguns elementos de texto alinhados verticalmente da seguinte forma:

Eles são centralizados horizontal e verticalmente na página usando o flexbox:

.my-class {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
}

O que estou tentando fazer agora é manter esse alinhamento (ou seja, manter tudo o que está na página já exatamente onde está) enquanto adiciona alguns elementos nos dois lados da primeira caixa de texto. Eu tentei embrulhar tudo que eu, ndiv mas como os elementos dos dois lados da caixa de texto não têm a mesma largura, a caixa de texto perde seu alinhamento:

Como você pode ver, as caixas de texto longas agora estão desalinhadas. Como posso adicionar elementos antes e depois da primeira caixa de texto sem mover para onde ela está?

questionAnswers(1)

yourAnswerToTheQuestion