可変するテキストの分量に関わらず、テキストの幅を固定したい。

Question

前提・実現したいこと

数値を増減するボタンの間に、現在値を表示するコンポーネントがあります。
下記はデモです。
CodeSandBox
デモはReact.jsを使用しています。

+マークや-マークが表示された際や数値の桁が増減する度に、テキストの分量が変わり、それに伴いマイナスボタンの位置が変わります。
テキストの分量に関わらずテキストの幅を固定し、マイナスボタンの位置が動かないようにしたいです。

「css テキスト 幅 固定」でググったのですが、解決策を見つけることができませんでした。

該当のソースコード

const [count, setCount] = useState(0);

  return (
    <div className="wrap">
      <button onClick={() => setCount(count + 1)}>プラス</button>
      <span>現在地： {count > 0 ? "+" + count : count}</span>
      <button onClick={() => setCount(count - 1)}>マイナス</button>
    </div>
  );

span {
  padding: 0 8px;
}

Answer 1

inline-blockにすることで、幅を設定することができますので、適切な幅を設定してください。

span {
  padding: 0 8px;
  display: inline-block;
  width: 150px;
  text-align: center; /* お好みで */
}