どもです。
フォームのCSSは永遠の課題感あります。

インラインブロック要素であるボタンが2つ以上並んでいて、サイズが違うものがある。
このとき、ボタンを下揃えで並べたい。

通常は、ボタンにvertical-align:bottom;でおｋ。
インラインな要素なら、普通はこれで解決できます。

が、
事情があって、このボタンはfloat:right;されているのです。

具体的には、このボタンたちはフォームのsubmit用ボタンで、
フォームをエンターしたときは一番前に記述したsubmitのイベントが発生するけれど、
一番右のボタンのイベントを発生させたいためにfloat:rightで並び順を逆にしているのです。

この状態ではvertical-align:bottom;が意味を成しません。要素が全て上付きになってしまいます。
どーしよう。

①margin-top調整できないか ←ブラウザ差異によって失敗。

あ゛あ゛あ゛あ゛あ゛あ゛ぁ（怒）

calc()で調整できないかなーとも思ったのですが、
そもそもボタンのデフォルトデザインが違うから親のdivの高さが違くなって、ダメですな！もう！

ん？ ボタンのデフォルトデザインが違うからdivの高さが違くなる？？

あ、そうか。

ボタンの高さが違うから差異になるんだ。
逆に言えば、ボタンの高さが同じなら差異は起きない。

②ボタンの高さを定めてしまえばどうとでもなる。

ボタン群の親{
	text-align:right;
	height:3em;
	line-height:3em;
	overflow:hidden;
}
button{
	box-sizing:border-box;
	height:3em;
	float:right;
}
button.smallButton{
	font-size:0.8em;
	height:2em;
	vertical-align:bottom;
	float:none;
}

こうすればvertical-align:bottom;が効くし、margin-topで調整することもできるじゃないか。

ほらー！！

こーいうことが起きるので、新規サイトならいっそ
ボタンのデザインはデフォルトから変えてしまうのがGood！ですな！

また僕の前に立ちはだかるか、IE。

ボタンの中の文字がline-heightに従って押し広げられるよう。

まぁ、

致命的ではないし。

IEはもうサポート外で、いいかな。

追記：そもそもdisplay:flex使えばこんなことに悩む必要ないじゃん！

<div style="display:flex; flex-direction:row-reverse; align-items:flex-end;">
	<button type="button" style="font-size:1.2em; margin-left:4px">大きいボタン</button>
	<button type="button" style="font-size:0.8em;">小さいボタン</button>
</div>

レイアウトのためにfloatを使う時代は終わったんや！(;'∀')

参考：[Qiita]CSS3 Flexbox 位置の揃え方まとめ