tableを使わないで位置を揃える方法

Question

簡単に説明すると
要素１１１ 結果１
要素２２ 結果２
要素３ 結果３

を

要素１１１ 結果１
要素２２ 結果２
要素３ 結果３

みたいにしたいです(ちょっとずれてますが)
タイトルの通りtableを使わないとした場合どのような方法があるでしょうか
検索の仕方が悪いのか見つからなかったのでよろしければご教授お願いします

Answer 1

div と span をつかって書いてみました。
上半分は Table をつかっています。下半分は table を使わずに書いています。
http://jsdo.it/katoy/htNX

html

<div>
    <div>
        <span class="col-1">要素１１１</span>
        <span class="col-2">結果１</span>
    </div>
    <div>
        <span class="col-1">要素２２</span>
        <span class="col-2">結果２</span>
    </div>
    <div>
        <span class="col-1">要素３</span>
        <span class="col-2">結果３</span>
    </div>
</div>

css

.col-1 {
    display: inline-block;
    width: 200px;
    /* border: solid 1px; */
}
.col-2 {
    display: inline-block;
    width: 100px;
    /* border: solid 1px; */
}

Comments

[sorat]

できました、ありがとうございます
今回はこの方法が一番やりたいことに都合がよかったのでベストアンサーにさせていただきました
rikさんのやり方も知らなかったのでいつか必要になったら使わせていただきますね

Answer 2

tableタグを使わずcssで指定できます。
これもインラインスタイルシートではなくclassまたはid属性にして
埋め込みスタイルシートまたは、外部ファイルのスタイルシートにすることをお勧めします。
要素１１１が２行になっても大丈夫です。

<div style="display:table;">
	<div style="display:table-row;">
		<div style="display:table-cell;">要素１１１</div>
		<div style="display:table-cell;">結果１</div>
	</div>
	<div style="display:table-row;">
		<div style="display:table-cell;">要素２２</div>
		<div style="display:table-cell;">結果２</div>
	</div>
	<div style="display:table-row;">
		<div style="display:table-cell;">要素３</div>
		<div style="display:table-cell;">結果３</div>
	</div>
</div>

Answer 3

極々簡単に書くと以下の書き方で可能です。
もちろんインラインスタイルシートではなくclassまたはid属性にして
埋め込みスタイルシートまたは、外部ファイルのスタイルシートにすることをお勧めします。
要素１１１が２行になる場合などは考慮していません。

<div style="float:left;">
	要素１１１<br>
	要素２２<br>
	要素３
</div>
<div style="float:left;">
	結果１<br>
	結果２<br>
	結果３
</div>
<div style="clear:both;"></div>