CSS for two columns which float left - html

Question

I want to display two pieces of text side by side in columns using CSS. The left-hand column text is variable in length, and the right-hand text is fixed and always the same length.
I want the two "columns" to float to the left next to each other e.g.
[Variable Text] [Fixed text]
If the variable text is long I want it to wrap.
eg,
Here is a very long Hello World
piece of variable
text which wraps
My code works if the variable text is short, but I get unwanted whitespaces if the variable text wraps.
eg,
Here is a very long Hello World
piece of variable
text which wraps
Here is my code:
#wrapper {
margin-right: 100px;
}
#left-col {
float: left;
max-width: 100%;
background-color: #CCF;
}
#right-col {
float: left;
width: 100px;
margin-right: -100px;
background-color: #FFA;
}
#cleared {
clear: both;
}
<div id="wrapper">
<div id="left-col">Here is a very long piece of text which wraps</div>
<div id="right-col">Hello World</div>
<div id="cleared"></div>
</div>

Answer 1

I believe changing #left-col's property max-width to other than 100% it will work. For example:
#wrapper {
margin-right: 100px;
}
#left-col {
float: left;
max-width: 200px;
background-color: #CCF;
}
#right-col {
float: left;
width: 100px;
background-color: #FFA;
}
#cleared {
clear: both;
}
Here is a jsfiddle with various text lengths for clarity.

Answer 2

you could maybe update your html to something more meaningfull and easier to style without class ou id. (a <dl> is not the most efficient but shows alternative tags easy to style)
calc() can be useful here :)
#wrapper {
width:15em;/* demo purpse */
}
dl,dt,dd {
padding:0;
margin:0;
}
dt {
float: left;
clear:left;
text-align:justify;/* to fill up entire first lines when text wraps*/
max-width: calc(100% - 100px);
background-color: #CCF;
margin-top:0.1em;
}
dd {float:left;
width: 100px;
background-color: #FFA;
}
<dl id="wrapper">
<dt>1 Here is a very long piece of text which wraps</dt>
<dd>Hello World 1</dd>
<dt>2 Here is a very long piece of text which</dt>
<dd>Hello World 2</dd>
<dt>3 Here is a very long piece of text</dt>
<dd>Hello World 3</dd>
<dt>4 Here is a very long piece</dt>
<dd>Hello World 4</dd>
<dt>5 short</dt>
<dd>5</dd>
</dl>