HTMLの回り込みによるブロック要素が崩れてしまいます

Question

現在htmlでコーディングしているのですが、以下の画像のようなスタイルを実現するとすると、どのようなCSSを書き、HTMLを書けばよいでしょうか？

線はそれぞれコンテンツ境界線と考えています。

現在以下のようなコードを書いていますが、次の画像のような形になってしまいます。
(現在張り付ける用の画像がないためにdivにボーダーをつけて代用しています)

div{
    margin: 10px;
}
.blocka{
    display: block;
    height: 200px;
    border: solid 2px;
    margin-right: 20px;
    float: left;
}
.blockb{
    display: block;
    border: solid 1px;
}

<div style="display:block;">
    <div class="blocka"></div>
            
    <div class="blockb">
        <p>文章</p>
            
        <p style="width: 200px;border:solid 1px;">タンゴ</p>
            
        <p style="padding-top: 60px;">文章</p>
    </div>
</div>

多分ブロック要素の扱いとfloatの回り込みの理解がなってないために起こっている問題だとは思いますが、どうかよろしくお願いします。

Answer 1

この形ですとflexかgridの方が組みやすそうですが、いったんfloatで考えます。

blockaにfloat:left;を入れているので、blockbにはfloat:right;を入れてください。
blockbの、文章の中に単語が入っている部分は、

<div style="padding-top: 60px;">文章
      <p style="width: 200px;border:solid 1px;">タンゴ</p>
</div>

にすれば基本的な形ができてくると思います。
あとはスタイル調整していってください。