如何使用html & css并排放置两个选择属性(格式不同)

<table>
  <tr>
    <td>
      <input type="radio" name="option" id="option1" value="option1">
      <label for="option1">Option 1</label>
    </td>
    <td>
      <input type="checkbox" name="option" id="option2" value="option2">
      <label for="option2">Option 2</label>
    </td>
  </tr>
</table>

<div class="container">
  <div class="option">
    <input type="radio" name="option" id="option1" value="option1">
    <label for="option1">Option 1</label>
  </div>
  <div class="option">
    <input type="checkbox" name="option" id="option2" value="option2">
    <label for="option2">Option 2</label>
  </div>
</div>

.container {
  width: 100%;
  overflow: hidden;
}

.option {
  width: 50%;
  float: left;
}