CSSでテーブル使わずに簡単レスポンシブ！下線だけ引いて横並びデザイン

こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。

デザインは、下線のみで。

今までテーブルで作ってたんですけど、シンプルじゃないかなぁと。。
テーブルってレスポンシブがめんどくさいし(´・ω・｀)

というわけでコード作りました！

HTML

<div class="box">
<ul>

<li>
<span class="box-left">左側のコンテンツ</span><span class="box-right">右側のコンテンツ</span>
</li>

<li>
<span class="box-left">左側のコンテンツ</span><span class="box-right">右側のコンテンツ</span>
</li>

</ul>
</div>

CSS

.box {
	margin: 0;
}
.box ul {
	margin: 0;
	list-style: none;
}
.box ul li {
	padding: 1em 0;
	border-bottom:1px solid rgba(0,0,0,0.2);
}
.box ul li a {
	text-decoration: none;
	display: block;
}
.box-left {
	display: inline-block;
	width: 20%;
	margin-right: 10%;
	vertical-align: middle;
}
.box-right {
	display: inline-block;
	width: 70%;
	vertical-align: middle;
}

応用

WordPressで投稿をニュースっぽく表示したりもできますね！

<div class="box">
	<ul>
		<li>
			<a href="<?php the_permalink() ?>"><span class="left"><?php the_time('Y.m.d'); ?></span><span class="right"><?php the_title(); ?></span></a>
		</li>
	</ul>
</div>