JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<div id="contain">
    <div class="newsdiv">
        <div class="picdiv" style="background-image: url('[...]');"></div>
        <div class="titlediv"> <a href="#"><font size="4">', $row['title'], '</font></a>

        </div>
        <div class="textdiv"> <font size="1">This is some dummy text</font>

        </div>
        <div class="linksdiv"> <a href="#">[Read More...]</a>

            <div class="statsdiv"> <a href="#">Views: 0 , Comments: 0</a>

            </div>
        </div>
    </div>
    <div class="newsdiv">
        <div class="picdiv" style="background-image: url('[...]');"></div>
        <div class="titlediv"> <a href="#"><font size="4">', $row['title'], '</font></a>

        </div>
        <div class="textdiv"> <font size="1">This is some dummy text</font>

        </div>
        <div class="linksdiv"> <a href="#">[Read More...]</a>

            <div class="statsdiv"> <a href="#">Views: 0 , Comments: 0</a>

            </div>
        </div>
    </div>
</div>

CSS

#contain {
    display: block;
}
#contain > div {
    display: inline-block;
}

.newsdiv {
    overflow: hidden;
    height: 126px;
    width: 49%;
    padding: 5px;
    border: 2px solid black;
    display: inline-block;
    margin-bottom: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.picdiv {
    width: 220px;
    height: 110px;
    border: 1px solid #444;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 382px 120px;
    float: left;
}
.titlediv {
    height: 20px;
    text-align: center;
}
.textdiv {
    overflow: hidden;
    margin-top: 8px;
    height: 70px;
    text-align: center;
}
.linksdiv {
    font-size: 8pt;
    text-align: center;
    height: 10px;
}
.statsdiv {
    font-size: 7pt;
    text-align: right;
    display: inline-block;
    height: 10px;
}