如何对齐我的左单选按钮和复选框，就像我可以轻松地对齐段落一样？

<table>
  <tr>
    <td><input type="radio" name="option" value="option1"></td>
    <td>选项1</td>
  </tr>
  <tr>
    <td><input type="radio" name="option" value="option2"></td>
    <td>选项2</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="option" value="option3"></td>
    <td>选项3</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="option" value="option4"></td>
    <td>选项4</td>
  </tr>
</table>

<div class="container">
  <input type="radio" name="option" value="option1">
  <label>选项1</label>
  <br>
  <input type="radio" name="option" value="option2">
  <label>选项2</label>
  <br>
  <input type="checkbox" name="option" value="option3">
  <label>选项3</label>
  <br>
  <input type="checkbox" name="option" value="option4">
  <label>选项4</label>
</div>

<style>
.container {
  width: 200px;
}

input[type="radio"],
input[type="checkbox"] {
  float: left;
  margin-right: 10px;
}
</style>

<div class="container">
  <input type="radio" name="option" value="option1">
  <label>选项1</label>
  <br>
  <input type="radio" name="option" value="option2">
  <label>选项2</label>
  <br>
  <input type="checkbox" name="option" value="option3">
  <label>选项3</label>
  <br>
  <input type="checkbox" name="option" value="option4">
  <label>选项4</label>
</div>

<style>
.container {
  display: flex;
  flex-direction: column;
}

input[type="radio"],
input[type="checkbox"] {
  align-self: flex-start;
}
</style>