Question

So basically the effect I want to achieve is something like the following:

          Wrapped Text Wrapped
 Text     Text Wrapped Text
          Wrapped Text

As if they were in two separate tds, in which case the code would have been like follows:

<table>
<tr>
<td>Text</td>
<td style="width: 150px;">Wrapped Text Wrapped Text Wrapped Text Wrapped Text</td>
</tr>
</table>

But I want to accomplish this effect without tables, but by using HTML & CSS. How is this possible?

Answer 1

Put the text blocks in divs and float them:

HTML:

 <div id="div1">
    Text
 </div>


 <div id="div2">
       Text Wrapped Text
      Wrapped Text
         Wrapped Text Wrapped
 </div>

CSS

 #div1, #div2{float:left;width:100px}

See it in action here: http://jsfiddle.net/GyMbS/

… but this leaves you with the challenge to vertically-center the either cell, as Amberlamps notes. That solution is tricky, and will depend on requirements of your text — will it always be one-line? Will the height of the cells be fixed? See Vertical Centering With CSS for solutions in various contexts.

UPDATE – ALTERNATIVE
Or you can use display:table-cell on the divs, which makes vertically aligning the left-cell much simpler:

#div1, #div2{display:table-cell;vertical-align:middle;width:100px;}​

See this working here: http://jsfiddle.net/GyMbS/1/

Major Caveat: requires IE8 + or non-IE browser (see: http://caniuse.com/#feat=css-table)