CSS two columns layout with Javascript document.write

In your second document.write() you forgot to close the <div> element, as well left out a <p> tag. Escaping " can be annoying to do. You can create strings with either a single quotation mark ' or double quotation marks ". Combining them allows you to use one of them as strings.

document.write('<div id="theLeft"><p>Career Objective: </div>');
document.write('<div id="theRight"><p>' + co + '</p></div>');

As for your CSS, steer clear of the float and clear properties. These properties are the old way of making layouts. I'd even suggest that you look for a more up-to-date class to take on web development.

Nowadays we have Flexbox (1 dimensional layout) and CSS Grid Layout (2 dimensional layout) to create our layouts. These tools are specifically made to position elements in either a flexible flow or a (predetermined) grid. For this example I'll use CSS Grid.

CSS Grid Layout is a display type, like block, inline and flex, and has it's own properties to create a grid. In this case you want 2 columns.

First set the display property to grid:

body {
  display: grid;
}

Now your body is a Grid Parent, meaning that all the direct children in the body are Grid Children and can be positioned in the grid.
Create a layout with the following properties.

body {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 2fr 1fr;
}

grid-template-rows specifies how many rows should be in this grid. In this case we've set it to 1 row width an auto height. It is comparable to setting the height: auto; property, but for a single row.
grid-template-columns sets the amount of columns in the grid. In it we specify 2 columns and use the new fr value. fr stands for fraction and in this case it means: "Between the two columns divide the space. Give the first column 2 out of the 3 fractions and the second column 1 out of the 3 fractions.". This ends up to a 66.6% and 33.3% division of space.

You can also give your rows and columns a name with the grid-template-areas property. It detects the rows and columns we already defined and allows us to give them names with a string.

body {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: 
    "left right";
}

This says that the first column in the first row is called left and the second column in the first row is called right. And you can assign your child elements to it like this with the grid-area property.

div#theLeft {
  grid-area: left;
}

div#theRight {
  grid-area: right;
}

Below here is a working example of your code with CSS Grid

var co = 'To be the best!';

document.write('<div id="theLeft"><p>Career Objective: </div>');
document.write('<div id="theRight"><p>' + co + '</p></div>');

body {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "left right";
  font-size: 12pt;
  font-family: verdana;
}

div {
  padding: 20px;
}

div#theLeft {
  grid-area: left;
  background-color: #d0d0d0;
}

div#theRight {
  grid-area: right;
  background-color: #f0f0f0;
}

You can figure out what your strings look like by either setting a breakpoint in your browser's debugger or with the console API. That way the typos become obvious:

var co = "Hellow, World!";
console.log("<div id=\"theLeft\"><p>Career Objective: </div>");
console.log("<div id=\"theRight\""+co+"</p></div>");

Also, if as I suspect co contains raw unescaped plain text your code is unsafe and can easily break. Please compare:

var co = "When X<Y then Hellow, World!";
console.log("<div id=\"theRight\">"+co+"</p></div>");
console.log("<div id=\"theRight\">"+encodeHTML(co)+"</p></div>");

document.write("<div id=\"theRight\">"+co+"</p></div>");
document.write("<div id=\"theRight\">"+encodeHTML(co)+"</p></div>");

function encodeHTML(plainText){
    return String(plainText)
        .replace(/&/g, "&amp;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;");
}

Last but not least, the 21st century way to do it would be using the DOM API, e.g.:

var co = "When X<Y then Hellow, World!";
var div = document.createElement("div");
div.id = "theRight";
div.innerText = co;
document.querySelector("section").appendChild(div);

<section></section>