Как ориентировать контент двух неудар в лунку text как будто они были одним?

У меня есть два <input type="text"> и мне нужно, чтобы оба остались центрованными как будто они были одним, я объясняюсь:

Существуют два поля, один для имени и другого для фамилии, если я вхожу например "ХУАН ДИАЗ", этот текст (что их было бы двумя input) визуально останься сконцентрированным на контейнер желтого цвета, он не является точным, но дает внешний вид.

Проблема коренится, когда у имени или фамилии нет той же длины, как я показываю в этом изображении:

Существует способ это делать только с CSS, ориентировать текст обоих неудар в лунку как будто они были одним? Также он мог бы выбирать JS. Единственное состоит в том, что их всегда должно быть два (2) input сориентированные. Она была бы чем-то подобным функции "сочетаться и ориентировать" Excel, только из-за того, что поместил бы пример.

Это код проблемы:

input {
  border: none;
  background: transparent;
  text-transform: uppercase;
  font-weight: bold;
  width: 150px;
}

.contenedor {
  background-color: gray;
  width: 350px;
  padding: 4rem;
}

.centrar {
  background-color: yellow;
  padding: 1rem;
  margin: 0 auto;
  text-align: center
}

.nombre {
  text-align: right;
}

.apellido {
  text-align: left;
}

<div class="contenedor">

  <div class="centrar">
    <input class="nombre" type="text" /> <input class="apellido" type="text" />

  </div>
 <div>

Спасибо за Ваши наблюдения.