ソーシャルボタンをきれいに横に並べるスニペット

ソーシャルボタンをきれいに横に並べるのに嵌ったので……。
ソーシャルボタンは種類が多いし、ときたまソースが変わるので、これがいつまで持つかはわからないのですが。

<div id="social">
	<div class="twitter">
	<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://example.com/" data-count="none">Tweet</a>
	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
	</div>
	<div class="facebook">
	<div class="fb-like" data-href="http://example.com/" data-width="80" data-layout="button" data-show-faces="false" data-share="false"></div>
	</div>
</div>

#social img {
	width: 100%;
	line-height: 0 !important;
	vertical-align:top;
}

#social .facebook,
#social .twitter{
	display: inline-block;
	height: 20px;
	overflow: hidden;
	line-height: 0 !important;
	vertical-align:top;
	width: 80px;
	text-align: right;
}

#social .facebook {
	width: 70px;
}

#social .facebook span{
	vertical-align:top !important;
}