JSFiddle - React, Tailwind, and code Playground

by Liam Talbot

HTML

<div class="ads-container">
    <ul class="ads-ul">
        <li class="ads-li">
            <div class="ads-prod-title">BSN Superstrike</div>
            <div class="ads-prod-icons"> <img src="http://i.imgur.com/oCiWAAU.png" /></div>
            <div class="ads-prod-img"> <img src="http://i.imgur.com/WdWYl8g.png" /></div>
            <div class="ads-prod-text"> Lorem ipsum dolor sit amet, tur adipiscing elit. Praesent issim purus urna, et bibend orci metus Praesent issim purus urna...</div>
        </li>
        <div class="ads-separator"></div>
        <li class="ads-li">
            <div class="ads-prod-title"></div>
            <div class="ads-prod-icons"></div>
            <div class="ads-prod-img"></div>
            <div class="ads-prod-text"></div>
        </li>
        <div class="ads-separator"></div>
        <li class="ads-li">
            <div class="ads-prod-title"></div>
            <div class="ads-prod-icons"></div>
            <div class="ads-prod-img"></div>
            <div class="ads-prod-text"></div>
        </li>
        <div class="ads-separator"></div>
        <li class="ads-li">
            <div class="ads-prod-title"></div>
            <div class="ads-prod-icons"></div>
            <div class="ads-prod-img"></div>
            <div class="ads-prod-text"></div>
        </li>
    </ul>
</div>

CSS

.ads-container {
   width: 274px;
   height: 913px;
   margin-top:  55px;
}

.ads-ul { list-style-type: none; }

.ads-li {
    width: 274px;
    height: 185px;
    background-color: #f7f7f7;
}

.ads-separator { }
.ads-prod-title { text-align: left; }

.ads-prod-icons {
    padding: 0px;
    margin: 0px;
    float:right;
}

.ads-prod-img { float: left; }
.ads-prod-text {
    float: left;
    width: 177px;
}