HTML/CSS hover does not work as expected in column layout

I have a column layout design where I will have some fields on the left, and--when hovering one such field--info about them on the right. However, I can't seem to get it working. Please let me know what you think.

HTML:

<div id="content">
    <div class="content-left">
         <p class="one">This is page1 left content</p>

    </div>
    <div class="content-right">
         <p class="one_info">This is page1 right content</p>
    </div>
</div>

CSS:

.content-left{
    background-color: #bcc5d8;
    display: inline-block;
    float: left;
    width: 75%;
    margin-left:15px;
    margin-right:5px;
}

.content-right{
    background-color: lightsteelblue;
    display: inline-block;
    margin-right:15px;
    //margin-bottom:16px;
}

.one_info{
    opacity:0;
}

.one:hover .one_info{
    opacity:1;
}

Code in motion: http://ift.tt/1aGVOPC