<input>在Chrome浏览器中相互齐平，但不在FireFox中

我目前正在尝试制作三个输入框，它们的宽度相同，并且彼此齐平。输入是三种不同的类型，textareainput & select。我在Google Chrome中成功，但它在Firefox中完全无用。我已经通过堆栈溢出和互联网搜索，并没有找到一个很好的解释。<input>在Chrome浏览器中相互齐平，但不在FireFox中

这是我的HTML ...

<div id='add-topic-wrap'> 
    <h3 id='topic-wrap-title'>Add a new Topic</h3> 
    <div class='topic-input-wrap'> 
     <label>Topic: </label> 
     <input id='topic-input' type='text' ng-model='dashControl.topic.title' maxlength='30'></input> 
    </div> 
    <div class='topic-input-wrap'> 
     <label>Description: </label> 
     <textarea id='desc-input' ng-model='dashControl.topic.desc'></textarea> 
    </div> 
    <div class='topic-input-wrap'> 
     <label>Category: </label> 
     <select id='category-input' ng-model='dashControl.topic.category'> 
      <option>HTML5</option> 
      <option>CSS3</option> 
      <option>Javascript</option> 
      <option>PostgreSQL</option> 
      <option>Django</option> 
     </select><br> 
    </div> 
    <button id='submit-topic' ng-click='dashControl.addTopic(dashControl.logged_in_user)'>Submit</button> 
</div>

这里是我的CSS ...

#add-topic-wrap{ 
    border: solid black .1em; 
    width: 95%; 
    margin: 1em auto 0 auto; 
} 

#topic-wrap-title{ 
    font-family: 'Raleway'; 
    text-align: center; 
    margin: 0.5em 0; 
} 

.topic-input-wrap{ 
    height: 3em; 
    margin-left: .5em; 
} 

.topic-input-wrap{ 
    font-family: 'Raleway'; 
    height: 3em; 
} 

#topic-input, #desc-input, #category-input{ 
    float: right; 
    margin-right: .5em; 
} 

#desc-input{ 
    width: 12.5em; 
} 

#category-input{ 
    width: 13em; 
    height: 1.6em; 
} 

#submit-topic{ 
    margin: 0 0 1em 6.5em; 
    height: 1.5em; 
    font-size: 1em; 
    font-family: 'Raleway'; 
    background-color: transparent; 
    border: black solid .1em; 
}

左侧&火狐谷歌浏览器的截图右...