CSS：将多行文本包裹在浮动元素周围

如何解决CSS：将多行文本包裹在浮动元素周围

我正在尝试在页面顶部有一个图像的对齐标签和描述页面，

这是目前正在发生的事情...

这是我想要发生的事情（我使用上面的图片作为这里的“图片”......我希望这不会造成混淆。

我是否可以将多个带有文本的 div 包裹在此图像周围，同时保持名称与其值的垂直对齐？我的 CSS 有点生疏，但我不确定这是否可以完成（至少不是我在这里设置的方式）

        .content-col {
            display: inline-block;
            vertical-align: top;
            padding: 2px 2px 2px;
        }

        .content-key {
            width: 30%;
            font-weight: bold;
        }

        .content-value {
            width: 65%;
        }

        hr{
            margin-left: 10px;
            margin-right: 10px;
        }
        .imageDiv{
            background-color: pink;
            width: 200px;
            height: 200px;
            object-fit: contain;
            float: right;
            margin-left: 5px;
        }
   

<div class="imageDiv" ></div>

<div style="width: 100%;">
    <div class="content-col content-key">Attribute Name Test</div>
    <div class="content-col content-value">
        This is where the attribute value and description will be.
        This is where the attribute value and description will be.
        This is where the attribute value and description will be.
        This is where the attribute value and description will be.
        This is where the attribute value and description will be.
    </div>
</div>
<hr />
<div style="width: 100%;">
    <div class="content-col content-key">Attribute Name Test</div>
    <div class="content-col content-value">
        This is where the attribute value and description will be.
        This is where the attribute value and description will be.
        This is where the attribute value and description will be.
        This is where the attribute value and description will be.
        This is where the attribute value and description will be.
    </div>
</div>
<hr />