Obtenir bouton de champ et sur la même ligne dans une largeur fixe div

J'ai un formulaire. Le formulaire contient un champ de texte à l'intérieur d'un div. Le bouton suit la div qui contient le champ de texte. Par défaut, le bouton s'affiche sur la ligne suivante après le champ de texte. Je veux que le bouton soit sur la même ligne que le champ de texte.

Au départ, j'ai flotté la div contenant le champ et le bouton à gauche, et cela a fonctionné. Cependant, quand j'ai ajouté une largeur fixe à ma colonne de gauche de la div (un div qui contient tout ce qui est sur le côté gauche de ma page, y compris le formulaire précité), le bouton est allé à la ligne suivante de nouveau.

Pourquoi est-ce? Comment puis-je obtenir sur le bouton de retour sur la même ligne que le champ?

Voici mon formulaire:

<div class="topic_form" style="display: block; ">
  <form accept-charset="UTF-8" action="/videos/507/topic_update" class="edit_video" data-remote="true" id="edit_video_507" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="✓">
    <input name="_method" type="hidden" value="put">
    <input name="authenticity_token" type="hidden" value="0KkgG3U+Kck7SqZTTJ12Td7pLjEN9GEvKEwfRymqN7M=">
  </div>
  <div class="field">
<input class="topic_field ui-autocomplete-input" id="video_topic_names" name="video[topic_names]" size="30" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
  </div>
  <input id="topic_submit" name="commit" type="submit" value="Add Topic">
  </form>
</div>

Je flotte div.field et input#topic_submit à gauche, mais cela ne fonctionne plus après l'ajout d'une largeur fixe à ma colonne de gauche div.