Image box and Text links in Correct order - css

Question

I have tried a lot to make in correct order but unable to do.
Here is what i am using directly in widget
CSS
<style>
.news_lhs {
display: table-cell;
vertical-align: middle;
position: relative;
width: 100px;
background-color: #fff;
padding: 12px;
border-right: 1px solid #CCC
}
.tab-pane>ul li>.news_rhs {
display: table-cell;
width: auto;
font-size: 16px;
color: #595959;
padding: 10px;
vertical-align: top
}
.tab-pane>ul li>.news_lhs img {
width: 80px;
display: block
}
.tab-pane>ul li>.news_rhs a {
color: #333;
text-decoration: none
}
.tab-pane>ul li>.news_rhs .openlink {
width: 100%;
font-size: 14px;
padding: 0 0 5px;
color: #999;
font-weight: 400
}
.tab-pane>ul li>.news_rhs a.link {
color: #DA0000
}
.tab-pane>ul li>.news_rhs a strong {
font-weight: 400
}
.featureslist h2,
.newslist h2,
.reviewslist h2 {
font-size: 14px;
line-height: 18px;
font-weight: 400
}
.news_rhs h2 {
margin: 0
}
.n_opinion,
.n_sponsored {
line-height: 14px;
padding: 2px 4px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 3px;
white-space: nowrap
}
.xs_sprite i {
background-size: 140px;
background-color: #FFF;
width: 30px;
height: 30px;
bottom: -10%;
left: -10%;
position: absolute;
z-index: 9;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%
}
.xs_sprite.tab-pane>ul li {
border-width: 1px 0;
border-style: solid;
border-color: #CCC;
margin-top: -1px
}
.xs_sprite.tab-pane>ul li>.news_lhs a {
position: relative;
display: block
}
.n_sponsored {
font-size: 10px;
background-color: #fff100;
color: #000
}
.n_opinion {
background-color: #DA0000;
font-size: 14px;
color: #fff
}
.tab_ph {
padding: 0 12px 20px
}
.tab_ph.last {
padding-bottom: 0
}
.tab_ph_dtl {
background-color: #F7F7F7;
margin-top: 0;
display: table;
width: 100%
}
.tab_ph_dtl a {
display: table-row
}
.tab_ph_dtl .count {
width: 100px;
display: table-cell;
padding: 10px;
text-align: center
}
.tab_ph_dtl .count .lg_txt {
font-size: 30px;
line-height: 24px
}
.tab_ph_dtl .count span {
font-size: 18px;
color: #8C8C9A;
display: block
}
.tab_ph_dtl .p_name {
border-left: 1px solid #E4E4E4;
padding: 5px 10px;
display: table-cell;
vertical-align: middle;
color: #595959
}
.tab_ph_dtl .p_name,
.tab_ph_dtl .p_name h2,
.tab_ph_dtl .p_name strong {
font-weight: 400;
margin: 0;
font-size: 18px;
line-height: 20px
}
.tab_ph img {
border-bottom: none;
min-height: 200px
}
.tab_ph img,
.tab_ph_dtl {
border: 1px solid #e4e4e4
}
.tab_ph_dtl {
border-top: none
}
.video_icon {
width: 28px;
height: 36px;
background-position: 2.075% 70.399%
}
#tabs.stick {
position: fixed;
top: 50px;
background: #FFF;
padding: 5px 0 2px;
transition: all .2s ease;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
box-shadow: 0 1px 4px #CCC;
-webkit-box-shadow: 0 1px 4px #CCC;
-moz-box-shadow: 0 1px 4px #CCC;
z-index: 99;
}
</style>`
HTML
<div class="tab_container margin_bottom20">
<div id="latest" class="tab-pane xs_sprite active">
<ul class="newslist" id="news-view">
<div class="news_lhs">
<a href="#"><img width="80" height="60" alt="" title="Google Makes It Easier to Add Places and Suggest Changes in Maps" src="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" class="" />
</a>
</div>
<div class="news_rhs"><strong>Google Makes It Easier to Add Places and Suggest Changes in Maps</strong>
</div>
<div class="news_lhs">
<a href="#"><img width="80" height="60" alt="" title="Samsung Galaxy Note7 Pre-Orders Begin in Dubai, Iris Scanner Shown in Video: Reports" src="http://cdn.ndtv.com/tech/images/Samsung_Galaxy_Note_Sammobile_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/images/Samsung_Galaxy_Note_Sammobile_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" class="" />
</a>
</div>
<div class="news_rhs"><strong>Samsung Galaxy Note7 Pre-Orders Begin in Dubai, Iris Scanner Shown in Video: Reports</strong>
</div>
<div class="news_lhs">
<a href="#"><img width="80" height="60" alt="" title="Karbonn Mobiles Sets Up Manufacturing Unit in Haryana" src="http://cdn.ndtv.com/tech/images/karbonn_titanium_s600_hd_thumb.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/images/karbonn_titanium_s600_hd_thumb.jpg?downsize=160:120&output-quality=80&output-format=jpg" class="" />
</a>
</div>
<div class="news_rhs"><strong>Karbonn Mobiles Sets Up Manufacturing Unit in Haryana</strong>
</div>
<div class="news_lhs">
<a href="#"><img width="80" height="60" alt="" title="Indonesia Shrugs Off Pokemon Fatwa as Gaming Fever Takes Hold" src="http://cdn.ndtv.com/tech/images/gadgets/thumb/pokemons_wall_reuters_Small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/images/gadgets/thumb/pokemons_wall_reuters_Small.jpg?downsize=160:120&output-quality=80&output-format=jpg" class="" />
</a>
</div>
<div class="news_rhs"><strong>Indonesia Shrugs Off Pokemon Fatwa as Gaming Fever Takes Hold</strong>
</div>
<div class="news_lhs">
<a href="#"><img width="80" height="60" alt="" title="This Bengaluru-Based Company Wants to Help You Hire Full-Time Pokemon Hunters" src="http://cdn.ndtv.com/tech/images/gadgets/thumb/pokemon_go_99_afp_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/images/gadgets/thumb/pokemon_go_99_afp_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" class="" />
</a>
</div>
<div class="news_rhs"><strong>This Bengaluru-Based Company Wants to Help You Hire Full-Time Pokemon Hunters</strong>
</div>
</div>
And i want to make it like below screenshot
http://i.imgur.com/BYnARKb.jpg
Please find the jsfiddle here

Answer 1

Here is a cleaned up (and shortened) version of yours.
.tab-pane ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.tab-pane ul {
display: table;
border-collapse: collapse;
}
.tab-pane ul li {
display: table-row;
}
.tab-pane .news_lhs {
display: table-cell;
vertical-align: middle;
position: relative;
width: 100px;
padding: 12px;
border: 1px solid lightgray;
}
.tab-pane .news_rhs {
display: table-cell;
width: auto;
font-size: 16px;
color: #595959;
padding: 10px;
vertical-align: top;
border: 1px solid lightgray;
}
.tab-pane .news_lhs img {
width: 80px;
display: block
}
.tab-pane .news_rhs a {
color: #333;
text-decoration: none
}
.tab-pane.xs_sprite .news_lhs a {
position: relative;
display: block
}
<div class="tab_container margin_bottom20">
<div id="latest" class="tab-pane xs_sprite active">
<ul>
<li>
<div class="news_lhs">
<a href="#">
<img width="80" height="60" alt="" title="Google Makes It Easier to Add Places and Suggest Changes in Maps" src="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg"
class="" />
</a>
</div>
<div class="news_rhs">
<a href="#">
<strong>Google Makes It Easier to Add Places and Suggest Changes in Maps</strong>
</a>
</div>
</li>
<li>
<div class="news_lhs">
<a href="#">
<img width="80" height="60" alt="" title="Google Makes It Easier to Add Places and Suggest Changes in Maps" src="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg" data-original="http://cdn.ndtv.com/tech/google_maps_android_logo_small.jpg?downsize=160:120&output-quality=80&output-format=jpg"
class="" />
</a>
</div>
<div class="news_rhs">
<a href="#">
<strong>Google Makes It Easier to Add Places and Suggest Changes in Maps</strong>
</a>
</div>
</li>
</ul>
</div>
</div>