どもです。
フォームのCSSは永遠の課題感あります。
インラインブロック要素であるボタンが2つ以上並んでいて、サイズが違うものがある。
このとき、ボタンを下揃えで並べたい。
通常は、ボタンにvertical-align:bottom;でおｋ。
インラインな要素なら、普通はこれで解決できます。
が、
事情があって、このボタンはfloat:right;されているのです。
具体的には、このボタンたちはフォームのsubmit用ボタンで、
フォームをエンターしたときは一番前に記述したsubmitのイベントが発生するけれど、
一番右のボタンのイベントを発生させたいためにfloat:rightで並び順を逆にしているのです。
この状態ではvertical-align:bottom;が意味を成しません。要素が全て上付きになってしまいます。
どーしよう。
Menu
①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を使う時代は終わったんや！(;'∀')