JSFiddle - React, Tailwind, and code Playground

by jblasco

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
</style>

</head>
<body>
    
<div id="wrap">
    <div class="left"><div class="inner">[ico]</div></div>
    <div class="right"><div class="inner">[ico]</div></div>
        <div class="right"><div class="inner">999</div></div>
    <div class="middle">
        <h3 class="li-heading">This is a heading. It may be long. It must not wrap. It must rather hidden/ellipsis</h3>
        <p class="li-subtext">This is some smaller subtext. It too can be very long and must not wrap, but rather hidden/ellipsis. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <p class="li-subtext">This is some smaller subtext. It too can be very long and must not wrap, but rather hidden/ellipsis. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <p class="li-subtext">This is some smaller subtext. It too can be very long and must not wrap, but rather hidden/ellipsis. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>                
    </div>
</div>
    
</body>

</html>

CSS

#wrap {
    padding: 0.75em 0;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    height: 80px;
}
    div.left {
        float: left;
        height: 80px;
        padding-right: 0.75em;
    }
    div.right {
        float: right;
        height: 80px;
        padding-left: 0.75em;
    }
        div.right div.inner, div.left div.inner {
            display: table-cell;
            height: 80px;
            vertical-align: middle;
        }
    div.middle {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
        div.middle h3.li-heading {
            font-size: 16px;
            font-weight: bold;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        div.middle p.li-subtext {
            font-size: 12px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            color: #999;
            margin-top: 0.25em;
        }