combination selector - Plus selector in css not working

May be i don't understand fully plus selector, What i want, when user click on radio button home, div one should get displayed, and when user click on radio button about, div two should get displayed, it did not work, So i strip down the code, where is the problem, with this code i accepted div one to get displayed as home is by default checked. But it did not happened, so i know where is the problem but i dont know why,

Please read the comment, in the code, as i said which line is giving the problem hint it's css last section,

HTML CODE

<div class="container">
            <input  type="radio"  name="option" id="home" checked />
            <input  type="radio"  name="option" id="about" />

            <div class="navigation">
                <label for="home"  class="link">Home</label>
                <label for="about" class="link">About Us</label>
            </div>

            <div class="display">
                <div class="one">
                <h3>This is first</h3>
                </div>

                <div class="two">
                <h3>This is second</h3>
                </div>
            </div>    
</div>

CSS CODE

.navigation {margin-top:20px;}
.link{cursor:pointer;}
/*making div display*/
.one,.two{
    display:none;
}

/*
###This line is not working## want to display div, if user click on radio
button
*/
#home:checked +.container > .one{
    display:block;
}

if you want to run the code here is the code pen link https://codepen.io/arif_suhail_123/pen/KvdWey