How do i make a CSS Sidebar using tables? – Html

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  display: block;
  min-height: 100%;
  background: url("https://4kwallpapers.com/images/wallpapers/macos-13-macos-ventura-macos-2022-stock-light-5k-retina-2048x1536-8135.jpg") no-repeat;
}

top {
  margin-bottom: 52px;
  position: top;
  display: inherit;
}

content {
  display: table;
}

sidebar {
  display: table-column;
  width: 200px;
}

mainse {
  appearance: none;
  -webkit-appearance: none;
  display: table-column;
}

<content>
  <sidebar></sidebar>
  <mainse>
    <label class="switch">
      <input type="checkbox" disabled checked>
      <span class="slider-switch"></span>
    </label><br><br>
    <label class="switch">
      <input type="checkbox">
      <span class="slider-switch"></span>
    </label><br><br>
    <checkbox>
      <input type="checkbox" name="hil">
      <label for="hil" cherad>Hil</label>
    </checkbox><br>
    <button class="primary pri-shadow">
      <label>Label</label>
      <gradient></gradient>
      <tint>
      </tint>
    </button>
    <button class="secondary sec-shadow">
      <label>Label</label>
      <gradient></gradient>
      <tint></tint>
    </button><br><br>
    <button class="primary" disabled>
      <label>Label</label>
      <gradient></gradient>
      <tint></tint>
    </button><br><br>
    <button class="secondary danger">
      <label>Label</label>
      <gradient></gradient>
      <tint></tint>
    </button><br><br>
    <input type="radio" name="rad">
    <label for="rad" cherad>Hil</label>
    <div style="width: 100px; height: 100px;" class="mat-NSVisualEffectMaterialSidebar shadow-primary"></div><br><br><br>
  </mainse>
</content>