Whats wrong with my code [CSS] - html

Question

I'm not so good with CSS to start with, however I'm really looking on improving myself.
Now what I wanted to acomplish is an expandable window, that would fit the size of the content with the animation of expanding.
My main issue is the #expand:hover and rightbut:hover doesn't work at all. And the fit div to content also doesn't work as when I go animate percentage it doesn't show the animation at all.
I know the code could be a completly miss however I do need you assistance, as I know you all know better than me.
Thank you!
https://jsfiddle.net/VisualTech48/0r27vgv4/1/
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
#rightbut {
position: absolute;
top: 16px;
right: 26%;
color: #7a7a7a;
}
#rightbut:hover {
color: #dddddd;
}
#expand {
text-transform: uppercase;
font-size: 150%;
border-width: 100%;
backround: #d4d4d4;
color: #7a7a7a;
transition: 0.5s;
/* Animation time */
-webkit-transition: 0.5s;
/* For Safari */
}
}
#expand:hover {
color: #dddddd;
}
label {
cursor: pointer;
}
p {
color: black;
}
/* Default State */
div {
background: #d4d4d4;
width: 75%;
height: 35px;
overflow: hidden;
transition: 0.8s;
/* Animation time */
-webkit-transition: 0.8s;
/* For Safari */
}
/* Toggled State */
div:hover {
background: #b2b0b0;
}
input[type=checkbox]:checked ~ div {
height: 290px;
background: #fff;
}

Answer 1

Very Simple changes. Changes made in your jsfiddle Demo
Modified below css..
/* Toggled State */
div:hover{
background: #b2b0b0;
height:auto;
}
input[type=checkbox]:checked ~ div {
height:auto;
background: #fff;
}
Added a New Class
input[type=checkbox]:unchecked ~ div {
// height:290px;
background: #fff;
}

Answer 2

Apparently, you can't animate height to auto, but you can animate max-height to a fixed number. It'll just fit the text because it's max-height
Demo at CodePen because it has "tidy" and AutoPrefixer built-in.
#expand {
text-transform: uppercase;
font-size: 150%;
border-width: 100%;
background: #d4d4d4;
color: #7a7a7a;
transition: 0.5s;
}
label {
cursor: pointer;
}
div {
background: #d4d4d4;
width: 75%;
max-height: 35px;
overflow: hidden;
transition: 0.5s;
}
div:hover {
background: #b2b0b0;
max-height: 5000px;
}
<div>
<label id="expand" for="expand-1">I'm a toggle</label>
<p>I'm controlled by toggle. No JavaScript!I'm controlled by toggle. No JavaScript!I'm controlled by toggle. No JavaScript!</p>
<br>
<p>hi</p>
</div>