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-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    text-align: left;
    background: #00ff00;
}