テキストラインの開始位置を揃えたまま中央寄せしたい

前提・実現したいこと

テキストラインの開始位置を揃えたまま全体を中央に寄せたいです
金額の最後に「円」がある為、少し左にずれてしまっております。
こちらの左のズレをなくし、「内容」と「金額」の開始ラインを揃えたいです。
アドバイスをいただけると幸いです。

以下現在のイメージです

該当のソースコード

HTML
1    <form className="add-form">
2      <select onChange={typeHandler}>
3        <option value="inc">+</option>
4        <option value="exp">-</option>
5      </select>
6      <div className="add-text">
7        <label>内容</label>
8        <input type="text" value={inputText} onChange={inputTextHandler} />
9      </div>
10      <div className="add-amount">
11        <label>金額</label>
12        <input type="number" value={inputAmount} onChange={inputAmountHandler}/>
13        <div>円</div>
14      </div>
15      <button className="add-btn" type="submit" onClick={submitItemHandler}>追加</button>
16    </form>

CSS
1.add-form {
2  background: var(--gray-color);
3}
4
5.add-text {
6  text-align: center;
7}
8
9.add-amount {
10  text-align: center;
11}
12
13.add-form label {
14  display: inline-block;
15  margin: 10px 0;
16  padding-right: 5px;
17}
18
19.add-amount > div {
20  display: inline-block;
21}
22
23form input[type="text"] ,input[type="number"] {
24  height: 40px;
25  width: 300px;
26  border: 1px solid #A9A9A9;
27  background: #fafafa;
28  border-radius: 3px;
29  color: #393939;
30}

行動規範の内容に同意します

回答1件

ベストアンサー

ご参考までに

Flexを利用してみる。
参考 mozilla

書き直してみたスタイルシートです。

CSS
1.add-form {
2  margin: auto;
3  max-width: 500px; /* 最大幅 */
4  background: var(--gray-color);
5}
6
7.add-text,
8.add-amount {
9  display: flex;
10  margin: 10px 0;
11}
12
13.add-form label {
14  display: flex;
15  align-items: center;
16  width: 40px;
17}
18
19.add-amount>div {
20  display: flex;
21  align-items: center;
22  justify-content: flex-end;
23  width: 25px;
24}
25
26form input[type="text"],
27form input[type="number"] {
28  height: 40px;
29  width: calc(100% - 71px); /* サイズを調整 */
30  border: 1px solid #A9A9A9;
31  background: #fafafa;
32  border-radius: 3px;
33  color: #393939;
34}