Hey there! I recently ran the code below in this online sandbox and noticed that the elements ".title-wrap" and ".bg-wrap" are showing up next to each other. Do you know of a way to adjust the code so that ".bg-wrap" automatically fills the entire space of ".wrap" with minimal css edits?
Here is the code snippet:
<div class="wrap selected">
<div class="title-wrap"></div>
<div class="bg-wrap"></div>
</div>
And here is the corresponding css:
.selected .title-wrap{
position:initial !important;
text-align: center;
height:29.42px;
animation:titleAnimation .2s;
-webkit-animation:titleAnimation .2s;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes titleAnimation
{
from {left:85px;top:5px}
to {left:25px;top:5px}
}
.wrap .title-wrap{
width:202px;
display:block;
position:absolute;
top:5px;
left:85px;
background:black;
}
.selected .bg-wrap{
background:green;
height:700px;
width:100%;
animation:bgAnimation .2s;
-webkit-animation:bgAnimation .2s;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes bgAnimation
{
from {left:85px;top:35px;}
to {left:205px;top:0px;}
}
.wrap .bg-wrap{
display:block;
position:absolute;
top:35px;
left:85px;
}