内联表单，缩小以使标签适合左侧

标题说标签是因为这是我的用例，但显然它可以是任何元素。我想要实现的是以下表单布局：

        [label] [input]
[another label] [input]
  [third label] [input]

目前我的 HTML 大致如下（省略细节）：

div {
    overflow: auto;
}
label, input {
    float: left;
}
label {
    text-align: right;
    width: 200px;
 }

<div>
    <label>Label</label> 
    <input type="text">
</div>
<div>
    <label>Another label</label> 
    <input type="text">
</div>
<div>
    <label>Third label</label> 
    <input type="text">
</div>

我正在寻找的是实现此布局的最佳方法，同时尽可能保持 HTML 的语义（这里额外的 div 或没有问题，我现在使用它们可以更轻松地控制垂直对齐和还有一些小的样式）。目前，我的文本输入恰好具有相同的大小，但还有一些单选按钮/复选框组必须驻留在[input]部分。

另外，我想保留使用媒体查询来应用一些 RWD 元素的选项。对于这个特定项目来说，这并不是一个大要求，但你永远不知道。哦，不幸的是，我必须支持低至 9 的 IE。

我如何以 IE9 和 IE10 支持的语义正确（即不使用表格）的方式解决这些问题？

一种疯狂的想法是将标签和输入分组在一起作为单独的 div。棘手的部分是通过以下方式将它们正确排列line-height.

<div id="labels">
  <label>...</label>
  ...
</div>
<div id="inputs">
  <input>...</input>
  ...
</div>

CSS:

#labels {
    float: left;
}
#labels label {
    display: block;
    text-align: right;
    line-height: 20px;
}
#inputs input {
    display: block;
    line-height: 20px;
}