formのボタンをinputタグの右側に寄せたい

Question

前提・実現したいこと

formのボタンをinputタグの右側に寄せたい。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<form method="post" action="/app/index">

<input type="text" name="name" size="30">
<input type="text" name="name" size="30">

<button type="submit">送信する</button>

</form>

とhtmlに書き、

form{
  width:80px;
}

とcssに書いた。

その結果、

のように表示された。
しかし、僕は

のように表示させたい。

formとして機能するものになるように、ボタンを右に持っていくには、どうcssに追記すればいいのか？

Answer 1

複数行にしたいinputを囲って、floatで横並びにしてはどうでしょう？

<form method="post" action="/app/index">
  <div class="left">
    <input type="text" name="first_name">
    <input type="text" name="last_name">
  </div>
  <button type="submit">送信する</button>
</form>

form {
  overflow: hidden;
}
input {
  box-sizing: border-box;
  width: 100%;
}
.left {
  float: left;
  width: 80px;
}
button{
  margin-left: 10px;
}

Answer 2

まずフォームが小さすぎるので、フォームの部品が入り切る大きさにしてください。

四角で囲ってある部分が、現在のwidth:80pxのフォームです。
これではボタンを右に出せません。

かなり強引なやり方ですが、とりあえずtopとleftの指定でやれるにはやれます。

<form method="post" action="/app/index" style="position: relative; width: 400px;">

<input type="text" name="name" size="30"><br>
<input type="text" name="name" size="30"><br>
<button type="submit" style="position: absolute; left: 250px; top: 10px;">送信する</button>

</form>