JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col span_1_of_3" style="height: 120px;">
    <div class="test2n" style="height: 100%;">
        <div class="main">
            <img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="http://i59.tinypic.com/23hvrc2.png" />
        </div>
        <div class="sub">
            <div class="sl"><a href="/template.aspx?id=2790">How we can better develop</a>
            </div>
            <div class="sr">This DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>
        </div>
    </div>
</div>
<div class="col span_1_of_3" style="height: 120px;">
    <div class="test2n" style="height: 100%;">
        <div class="main">
            <img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="http://i59.tinypic.com/23hvrc2.png" />
        </div>
        <div class="sub">
            <div class="sl"><a href="/template.aspx?id=2790">How we can better develop</a>
            </div>
            <div class="sr">This DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>
        </div>
    </div>
</div>
<div class="col span_1_of_3" style="height: 120px;">
    <div class="test2n" style="height: 100%;">
        <div class="main">
            <img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="http://i59.tinypic.com/23hvrc2.png" />
        </div>
        <div class="sub">
            <div class="sl"><a href="/template.aspx?id=2790">How we can better develop</a>
            </div>
            <div class="sr">This DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>
        </div>
    </div>
</div>

CSS

.imgArtThumb {
    max-width: 100%;
    height: auto;
}
.test2n {
    text-align: left;
    box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(238, 146, 85, 1);
}
.test2 p, .test2n p {
    text-align: left;
}
/*  COLUMN SETUP  */
 .col {
    display: block;
    /*float:left;*/
    display: inline-block;
    margin: 1% 0 1% 0;
}
.col:first-child {
    margin-left: 0;
}
.span_1_of_3 {
    width: 32.2%;
}
@media only screen and (max-width: 825px) {
    .col {
        margin: 1% 0 1% 0%;
    }
}
@media only screen and (max-width: 825px) {
    .span_3_of_3 {
        width: 100%;
    }
    .span_2_of_3 {
        width: 100%;
    }
    .span_1_of_3 {
        width: 98%;
    }
    .imgArtThumb {
        width: 100%;
        height: 110px;
    }
}
.main {
    float: left;
    display: inline-block;
    width: 43%;
    padding-right: 2%;
    height: 100%;
    background: #0000ff;
}
.sub {
    float: left;
    display: inline-block;
    width: 55%;
    height: 100%;
    background: #FF0000;
}
.sl {
    width: 100%;
    height: 50%;
    text-align: left;
}
.sr {
    width: 100%;
    height: 50%;
    overflow: hidden;
    text-align: left;
    background: #00ff00;
    position: relative;
}
.sr:after {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index:1;
    content: "...";
    background: inherit;
}