左端の要素の幅を揃えたい

<div>
  <span>あ</span>
  <span>テスト１</span>
</div>
<div>
  <span>あい</span>
  <span>テスト２</span>
</div>
<div>
  <span>あいう</span>
  <span>テスト３</span>
</div>

上記のような html があったとして、表示すると以下のようになります。

あ テスト１
あい テスト２
あいう テスト３

これを css を使って以下のように、左端の要素の幅を最も幅が広い要素に合わせることは可能でしょうか。左端の要素の内容は可変のため、直接 width を指定することはできません。

あ　　 テスト１
あい　 テスト２
あいう テスト３

<table> タグを使用して html の構造から変更したほうがよいでしょうか。