html - CSS：在浮动元素周围环绕多行文本

Question

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

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

这就是我想要发生的事情（我使用上面的图像作为“图像”......我希望这不会令人困惑。

我是否可以在此图像周围包裹多个带有文本的 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 />

标签： htmlcsscss-float