Change grid-column (sidebar) on hover [duplicate]

Question

I am trying to change the width of the sidebar that sets inside a parent grid layout when it's hovered on Such that the sidebar width now is 64px but when hover on becomes 120px

.container{
  display:grid;
  height: 100vh;
  width: 100vw;
  grid-template-areas: "sidebar content";
  grid-template-columns: 64px auto;
}
.sidebar{
  grid-area:sidebar;
  background-color: black;
}
.content{
  grid-area:content;
  background-color:red;
}
/* this part */
.sidebar:hover{
  grid-column:120px;
}

<div class="container">
<div class= "sidebar">

</div>
<div class="content">

</div>
</div>