Javascript 图像旁边的特殊缩进文本

我想生成一些特定的样式，左侧有一个图像（图标），图标旁边有一些描述（纯文本）

这就是我到目前为止得到的结果：

.elem{
左缘：7%；
位置：相对位置；
宽度：100%；
}
.文本{
显示：内联；
垂直对齐：中间对齐；
}
.img{
宽度：5%；
垂直对齐：中间对齐；
}

（1） 这是一个示例文本


（2） 这是一个长示例文本，因为这是一个长示例文本，而这是一个长示例文本，这也是一个长示例文本，也因为这是一个长示例文本，而所有都是一个长示例文本


（3） 这是一个示例文本

您可以像这样尝试flex：

.elem{
左缘：7%；
显示器：flex；
调整项目：灵活启动；
垫面：5px；
边缘底部：10px；
}
.img{
宽度：30px；
页边顶部：-5px；
}

(1)
这是一个示例文本
(2)
这是一个长示例文本，因为这是一个长示例文本，而这是一个长示例文本，这也是一个长示例文本，也因为这是一个长示例文本，而所有都是一个长示例文本
(3)
这是一个示例文本

你可以用这个做一个更轻松的标记

li{
列表样式：无；
显示器：flex；
边缘底部：10px；
}
li>span{
右边距：5px；
}
李：以前{
内容：''；
显示：块；
高度：32px；
宽度：32px；
最小宽度：32px；
右边距：10px；
背景图片：url(https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png);
-webkit背景尺寸：封面；
背景尺寸：封面；
背景重复：无重复；
}

（1） 这是一个示例文本
（2） 这是一个长示例文本，因为这是一个长示例文本，而这是一个长示例文本，这也是一个长示例文本，也因为这是一个长示例文本，而所有都是一个长示例文本
（3） 这是一个示例文本