.container {
  display: grid;
  height: 100vh;
  grid-template-columns: .5fr 1fr 1fr;
  grid-template-rows: .5fr 1.5fr 1.5fr;
  grid-template-areas:
    "nav nav nav"
    "sidebar main main"
    "sidebar main main";
  gap: 0.2rem;
}

.nav {
  background: #ff0000;
  grid-area: nav;
}

.main {
  background: #008000;
  grid-area: main;
  padding: 5px;
}

#sidebar {
  background: blue;
  grid-area: sidebar;
  padding: 20px;
}
/*ignoreee meee*/
#sidebar .tabs .tab {
  padding: 20px;
  cursor: pointer;
  font-weight: bold;
}
#sidebar .tab.active {
  text-decoration: underline;
}

/* Content in main — hide everything except the active one */
.main .content {
  display: none;
}
.main .content.active {
  display: block;
}
#me{
  width: auto;
  Height: 200px;
  Position: absolute;
  padding: 10px
}
#fella{
  right: 50px;
  width: auto;
  Height: 200px;
  Position: absolute;
  padding: 10px
}