html - Placing divs side by side causes linebreak, instead of overflow -

have small problem 2 div's placed side side.
left div of fixed width, right 1 not, , if content big causes linebreak, annoying.

example code:

everything's alright here:

<div id="no1">   <div class="left">this 1 on left side</div>   <div class="right">this 1 on right side</div> </div> 

css:

.left {float: left;} .right {float: right;} 

but if content of <div class="right"> gets long, causes unpretty linebreak.

i tried setting <div id="no1"> overflow: auto , overflow: scroll didn't anything.
tried setting width of no1 big enough, should fit, didn't work either.
bit confused on next.

jsfiddle demonstration can found here http://jsfiddle.net/3b4s7ta7/.

in advance guys!

solution:
alright, solution easy. user2482616 , others suggested had set size of 2 div's 50%, this:
.left, .right {width: 50%;}

thank guys!

try css:

.left,.right{width: 50%;} 

as create separate css query make file large. try minimize placing common css @ once. check code on edited code have edited.