将img和ul列表对齐

我正在尝试为我的网站的移动版本显示一个项目，而我想要完成的是拥有列出项目的图片，以及带有项目基本信息的项目符号列表，例如...

ITEM TITLE
--------------
|            |  <bullet>Material  <bullet>Origin
|            |  material          origin
|   ITEM     |
|            |  <bullet>Other info header <bullet>Other info
|            |  description               description
--------------  

到目前为止，我的HTML代码如下：

<div class="items">
        <h1>All items</h1>
        <div class="item">
            <h2><u>Item Title</u></h2>
            <div class="left">
                <a href=""><img src="path/to/img" alt="item picture" width="120" height="190"></a>
            </div>

            <div class="right">
                <div class="item-details">
                    <ul>
                        <lh>Material</lh>
                        <li>Gold</li>
                    </ul>
                    <ul>
                        <lh>Origin</lh>
                        <li>USA</li>
                    </ul>
                    <ul>
                        <lh>Other info</lh>
                        <li>Hello</li>
                    </ul>
                    <ul>
                        <lh>Date manufactured</lh>
                        <li>400 B.C.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

此的CSS是：

.item {
    background-color: #EFEFEF;
}

.left{
    float: left;
    display: table-cell;
}

.right{
    float: right;
    display: table
}

.item-details ul {
    float: left;
    font-family: Verdana;
    background-color: #EFEFEF;
}

.item-details ul lh {
    font-weight: bold;
    font-size: 0.8em;
}

.itemn-details ul li {
    list-style: none;
    font-size: 0.7em;
}

但是，无序列表似乎太大或什么，因此，html跳过了一些行，并将其放在图片的下面，这不是我想要的。

关于如何解决此问题的任何想法？