尝试从表设计切换到CSS,并在排列所有内容时遇到问题

在“旧时代”,我们可以把所有的东西都放进td细胞,所有的东西都排列得很整齐。有了这个CSS,我对如何做一些事情有些迷茫。我现在遇到的问题是,我想取左侧文本,在右侧填充大约50px,然后在文本旁边使用一个输入标记。但我得到的是输入框甚至不取决于文本的长度。如果我使用表设计,td标签将扩展到最长的文本,然后右边的所有输入都将很好地对齐。我如何用CSS来实现这一点?

这是我的HTML

  <li class="mainForm" id="fieldBox_2">
    <label class="formFieldQuestion">Caption: <input class=mainForm type=text name=field_2 id=field_2 size='30' value=''>
      <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>please enter the</span></a>
    </label>
  </li>

和CSS

#mainForm 
{
    position: relative;
    border: 1px;
    border-style: solid;
    margin: 0 auto;
    text-align: left;
    width: 70%;
    background-color: #ffffff;
}
ul.mainForm
{
    list-style-type: none;
    font-family: Tahoma, Arial, Verdana, sans-serif;
    font-size:15px; 
}
li.mainForm
{
    padding-bottom: 10px;
}

label.formFieldQuestion
{
    line-height:125%;
    padding:0 4px 1px 0;
    border:none;
    display:block;
    font-size:95%;
    font-weight:bold;
}