Float Left and RIght on inside Li Tag with seperate anchor each

I have a container, where I want to display some items on left and want to put a Cart icon on right side. I tried this, but not working, whats wrong here?

Both Text and Image have separate links.

Fiddle

HTML

<div class="showcase">
    <ul>
        <li class="item">
            <h1><a href="#">Item 1 + Star 1
                    <small>
                        <del>Rs. 6000</del>
                        <span> Rs. 3000</span>
                    </small>
                </a>
            </h1>
            <span class="pic"><a href="#"><img src="https://cdn0.iconfinder.com/data/icons/iicon/512/buy-Cart-48.png" alt=""></a></span>
        </li>
        <li class="item">
            <h1><a href="#">Item 2 + Star One
                    <small>
                        <del>Rs. 6000</del>
                        <span> Rs. 3000</span>
                    </small>
                </a>
            </h1>
            <span class="pic"><a href="#"><img src="https://cdn0.iconfinder.com/data/icons/iicon/512/buy-Cart-48.png" alt=""></a></span>
        </li>
    </ul>
</div>

CSS

.showcase ul {list-style-type: none;padding: 0;margin: 0 5px;}
.showcase li.item {border-bottom:1px solid #000;}
.showcase li.item a {display: block;color:#000;clear:both;}
.showcase li.item span.pic img {float: right;width:50px;height:50px;float:right;}

.showcase li.item h1 {text-transform: uppercase;font-family: 'fauna_oneregular' serif;white-space: normal;font-size: 0.8em;}
.showcase li.item h1 a {color:#000 !important;text-decoration: none}
.showcase li.item h1 small {color:#a51c10;display: block;}
.showcase li.item h1 small span {color:#79a510;}