Position:fixed not working

Position:fixed not working

I have a HTML page with the following content -
<div class="sidebar">
Some content here....
</div>
<div class="content">
content here too...
</div>
I want the .sidebar to be position:fixed, But not the .content. Here is
what I have tried in CSS -
.sidebar{
background:rgb(24, 33, 61);
text-align: right;
height: 100% !important;
width:30%;
postion:fixed;
left:0px;
top:0px;
bottom:0;
padding:1em;
color:white;
}
.content{
width:70%;
font-size:1.1em;
font-weight:normal;
position: absolute;
top:0;
right:0;
padding:2em;
}
Basically, I want to reproduce this. But what I'm getting now looks
perfect at first glance, but when you scroll down, the .sidebar doesn't
move with you, it stays at the same place.
How can I make it work?