Zwei Elemente auf gleicher Höhe?

[Jens Schärer]

Hallo,

hab mal wieder ein Problem mit CSS/HTML...
Ich möchte gerne zwei Elemente, genauer zwei Formularelemente (Textbox und Button) auf gleicher Höhe nebeneinander platzieren.
Mit folgendem CSS und HTML funktionierts soweit in Opera und auch Internet Explorer, der Firefox stellts mir irgendwie versetzt dar:

.inputSubmitButton
{
  background-color: #FFEAB1;
  border: 1px solid #7B807C;
  padding: 0px 3px 0px 3px;
  color: #333146;
  height: 1.5em;
  min-height: 1.5em; /* Opera und Firefox */
}

.inputText
{
  border: 0.1em solid #7B807C;
  margin: 0.0em 0.1em 0.0em 0.1em;
  padding: 0.0em;
  height: 1.3em; /* IE */
  line-height: 1.5em;
  min-height: 1.5em; /* Opera und Firefox */
}

<form action="http://www.google.de/search" method="get">
    <div class="inlinediv"><input class="inputText" type="text" value="" name="q" /></div>
    <div class="inlinediv"><input class="inputSubmitButton" type="submit" value="Go" /></div>
  </form>

Woran liegts?

P.S. Die Klasse "inlinediv" ist enthält lediglich Display Inline. Habs auch schon mit floats probiert, allerdings mit selbem Ergebnis wie oben beschrieben.
Bin für jede Hilfe und jeden Ratschlag oder auch Links dankbar.

Gruß,
Jens