Html 在2列无序列表中对齐图像和文本，并使其相邻

我试图呈现一个2列无序列表。我希望每个li标签都有一个图像，后面是文本，中间有一定的间隙。如果文本溢出两行，则第二行必须与第一行对齐，而不是与图像对齐。我之前得到了一个解决方案，但是，我被告知要有一个更精简的代码

我需要的图像是每个李标签的背景图像。代码是我的JSFIDLE链接

我不确定我会错在哪里

<section class="freedom_carousel"> 




<ul class="two-col">
<li class="pen"> <span class="icon-text"> <em>THis is </em> text text text text text text text </span> </li>
<li class="phone"> <span class="icon-text"> <em>THis is </em> text text text text text text text </span> </li>
<li class="arrow"> <span class="icon-text"> <em>THis is </em> text text text text text text text </span> </li>
<li class="download"> <span class="icon-text"> <em>THis is </em> text text text text text text text </span> </li>
</ul>

 </section> 

这是文本
这是文本
这是文本
这是文本

JSIDLE:

如果将

放在每个

li

中如何

<table>
            <tr>
                <td class="icon-text"><em>THis is </em></td>
                <td><span >  text text text text text text text </span> </td>
            </tr>
        </table>

这是
文本文本文本文本文本文本文本文本

---

让我们来看看背景图像应该有多大？充其量，您可以不使用

span

标记，但您不会得到比这更简单的代码。我的图像非常小。我估计大概是10px*10px。我期待的最终结果是这样的：如果我没有更早更好地解释，我深表歉意。我之前的解决方案要长得多。我可以有时间跨度。但是，现在，我能够找到按我需要的方式呈现它的方法。问题是列表项显示在一列而不是两列？这是因为30px的填充加起来等于45%的内容宽度，导致总宽度超过50%。尝试添加

框大小：边框框

，使填充从宽度中减去，而不是增加宽度。问题是背景图像不显示。它指向正确的路径，因为当我把它放在img标签中时，它会显示出来。它在一列中堆叠是一个问题，但我意识到它是可以解决的间距问题。