Как получить одну среднюю позицию для моих входов и пролета слева

Question

Как получить одну среднюю позицию для моих входов и всего диапазона слева.

Я хочу, чтобы мои входы были в середине страницы. другой диапазон (влево / вправо) будет соответствовать для входной дорожки

Я использую некоторые классы из bootstrap -4

CSS

span {
    color: oldlace;
}

input {
    position: relative;
    display: inline-block;
}

HTML

    <form (submit)="submit()">

      <div id="egg" class="invisible">
        <span class="p-1">Egg</span>
        <input class="text-center rounded-pill border border-danger p-1 m-1" type="number" title="Egg" name="egg"
          placeholder="gram" [(ngModel)]="protein.egg">
        <!-- <span class="p-1"> size</span><br> -->
      </div>

      <div id="bread" class="invisible">
        <span class="p-1">Bread</span>
        <input class="text-center rounded-pill border border-danger p-1 m-1" type="number" title="Bread" name="bread"
          placeholder="gram" [(ngModel)]="protein.bread">
        <!-- <span class="p-1"> slices , 30g pre slice</span><br> -->
      </div>

    </form>

Answer 1

Вы можете применить ширину в span

.spanE {
    display: inline-block;
    width: 5rem;
}

<form (submit)="submit()">
	<div id="egg" class="invisible">
		<span class="p-1 spanE">Egg</span>
		<input class="text-center rounded-pill border border-danger p-1 m-1" type="number" title="Egg" name="egg"
		placeholder="gram" [(ngModel)]="protein.egg">
		<!-- <span class="p-1"> size</span><br> -->
	</div>

	<div id="bread" class="invisible">
		<span class="p-1 spanE">Bread</span>
		<input class="text-center rounded-pill border border-danger p-1 m-1" type="number" title="Bread" name="bread"
		placeholder="gram" [(ngModel)]="protein.bread">
		<!-- <span class="p-1"> slices , 30g pre slice</span><br> -->
	</div>
</form>

Answer 2

Использование планшета в одном столбце Имя поля ввода и второй столбец ввода Fied