How do I make the text inside a div fluid when browser resizes?

Ok so I have 3 main divs; Grey div which is the wrapper, Blue div which is on the left side and Orange div which is on the right side. Blue div has a fixed width and height.

My question is, how do I make the TEXT inside the Orange div fluid when browser window resizes? I dont want the whole Orange div to just jump down under the Blue div, I want the text to be fluid instead. How do I achieve this?

Thank you for your time :)

Here's a JSFiddle link http://ift.tt/1HCBS9t

.wrapper {
    position: absolute;
    max-width: 1200px;
    width: 100%;
    margin-left: 10px;
    background: #3c3c3c;
}

.leftimg{
    width:600px;
    height: 2900px;
    background: #8cceff;
    position: relative; 
    float: left;
}

.rightside {
    background: #F96;
    float: right;
    width: 50%;
    height: 100%;
}

.projectimg {
    width: 600px;
    position: relative; 
    float: left;
    margin-bottom: 50px;
}

.project-title {
    font-family: 'Abel';
    color: #FFF;
    float: left;
    margin-left: 40px;
    font-weight: 300;
    display: block;
}

.project-title .title1 {
    font-size: 2.5rem;
}
.project-title .title2 {
    font-size: 1.4em;
    clear: both;
    display:block;  
}

.context {
    float: left;
    color: rgba(255,255,255, 0.7);
    width: auto;
    margin: 20px 0 0 40px;
    display: block;
    position: relative;
}
.context p {
    font-size: 1.06rem;
    line-height: 1.6rem;
    font-family: 'Roboto Condensed';
    font-weight: 300;
}