HTML/CSS两列/一行第二行换行(如果浏览器宽度太小)

我正在创建一个显示一系列行的网页。每行有两列。第一列由一个图像组成,第二列有两行(稍后可能会有更多,但目前我只有两行)。

下面是我想要的东西的速写:

这是我的HTML标记:

<div id="extensions" class="extensions">
    <div class="extensions row">
        <div class="extensions row icon">icon</div>
        <div class="extensions row details">
            <div class="extensions row name">Name: Some Name</div>
            <div class="extensions row desc" style="">Description: Some description blah blah blah.</div>
        </div>
    </div>
</div>

如您所见,根div(扩展)包含所有行。为了创建第一列(图标),我在根div的正下方放置了一个div。接下来,我创建另一个div,它是行(name和desc)的父级。

这是我的CSS:

.extensions {
    font-family: sans-serif;
    font-size: 95%;
}
.extensions .row  {
    margin: 5px;
    border: 1px solid red;
}
.extensions .row .icon {
    display: inline-block;
    border: 1px solid green;
}
.extensions .row .details {
    display: inline-block;
}
 .extensions .row .details .name {
    border: 1px solid orange;
}     
.extensions .row .details .desc {
    border: 1px solid purple;
}

(请注意,边框仅用于调试。)

当我的浏览器足够宽时,一切看起来都很好,如下所示:

但是,如果我最终使浏览器宽度变小,第二列将被包裹在图像列下面:

我已经尝试了各种方法来防止这种情况发生,但都无济于事。

有人能告诉我如何阻止第二列包装吗?我是否需要创建另一个div来将图像列和详细信息列都放在一个div中?

非常感谢。