css - 带有 CSS 的两个单元格的表格？

Question

我想得到这个结果，但没有表格(使用纯 CSS):

有了表格我可以用一个“tr”和两个“td”标签做这样的事情，但是没有表格怎么办？

这里是 jsfiddle

<table>
  <tr>
    <td>
        <div id="inputs">
          <p>Add some value:</p>
          <input type="text"/>
          <br/>
          <input type="button" title="Press Ok" value="Ok"/>
        </div>
    </td>
    <td>
        <div id="choices">
            <ul>
              <li>some choice</li>
              <li>some choice</li>
              <li>some choice</li>
              <li>some choice</li>
              <li>some choice</li>
              <li>some choice</li>
              <li>some choice</li>
            </ul>
          </div>
    </td>
  </tr>
</table>

Answer 1

放弃表格标记并使用 CSS:

#inputs, #choices {
  display:table-cell
}

#inputs, #choices {
  display:table-cell
}

<div id="inputs">
  <p>Add some value:</p>
  <input type="text" />
  <br/>
  <input type="button" title="Press Ok" value="Ok" />
</div>

<div id="choices">
  <ul>
    <li>some choice</li>
    <li>some choice</li>
    <li>some choice</li>
    <li>some choice</li>
    <li>some choice</li>
    <li>some choice</li>
    <li>some choice</li>
  </ul>
</div>