jQuery Mobileを使用してフォーム部品をスマホ向けに表示します。
フォーム部品をラベリングすることによりレイアウトの崩れなどを自動で補完してくれます。
ラベリングの前提として、div要素にdata-role="fieldcontain"を指定した間でフォーム部品を実装する必要があります。

<div data-role="fieldcontain">

</div>

ラベリングとはlabelのfor属性とフォーム部品のid属性を一致させることで実現させます。
legendの場合は、radioボタンなどのグループ部品に対して

<div data-role="fieldcontain">
  <a href="#" data-role="button">ボタン</a>
</div>

ボタンのDEMOです。

異なる部品を横に並べるにはcssのfloatを使うと横に並べることができます。
floatで横に並べる際は、フォーム部品に対してdata-inline="true"を指定する必要があります。
テキストボックスとボタンを横に並べるDEMOです。