如何在两个不同的HTML元素之间保持高度和宽度？

<div class="container">
  <div class="element1">Element 1</div>
  <div class="element2">Element 2</div>
</div>

<style>
.container {
  display: flex;
}

.element1, .element2 {
  flex: 1;
}
</style>

<table>
  <tr>
    <td class="element1">Element 1</td>
    <td class="element2">Element 2</td>
  </tr>
</table>

<style>
table {
  width: 100%;
}

td {
  width: 50%;
}
</style>

<div class="container">
  <div class="element1">Element 1</div>
  <div class="element2">Element 2</div>
</div>

<style>
.container {
  position: relative;
}

.element1, .element2 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.element1 {
  left: 0;
}

.element2 {
  right: 0;
}
</style>