html - テキストが長くなると動作が変化する

Question

私のサイトではレイアウトのために次の div 構造を使用しています。

<div>
     <div style="float: left; width: 200px;">1</div>
     <div style="float: left;">2</div>
     <br style="clear: left;" />
</div>
<div>
     <div style="float: left; width: 200px;">3</div>
     <div style="float: left;">4</div>
     <br style="clear: left;" />
</div>

この例ではうまく機能します。出力は次のようになります。

1 2
3 4

私が探していたもの。ただし、「4」のテキストを長くすると、次のように動作が変わります。

1 2
3 
44444444444444444444444444444444

私は次のことを期待していましたが、

1 2
3 44444444444444444444444444444..
  44444

このdivの問題に苦労する代わりに、基本的に2行2列のテーブルを使用できます。ただし、divを使用する方が良い方法だと彼らは言います。それで、解決策は何ですか？