Design help using css - css

Question

I need to achieve a nice 2 column layout as shown in
So far i could get only: https://jsfiddle.net/8qskxqfh/
code in fiddle link
Could you please suggest me on improving this design.
.myRatingBoxRed {
display: inline-block;
width: 15px;
height: 15px;
background-color: red;
}
.myRatingBoxYellow {
display: inline-block;
width: 15px;
height: 15px;
background-color: yellow;
}
.myRatingBoxGreen {
display: inline-block;
width: 15px;
height: 15px;
background-color: green;
}
.myResourceViewBody {
width: 960px;
position: relative;
margin: 0 auto;
}
.myResourceViewBody.myResourceSideBar {
position: absolute;
left: 0;
width: 240px;
height: 100%;
min-height: 800px;
color: #fff;
}
.myResourceViewInfo {
background: #fff;
padding-left: 300px;
}
.myResourceViewInfo .section-title {
text-transform: uppercase;
font-size: 20px;
font-weight: 500;
color: #2d7788;
position: relative;
margin-top: 0;
margin-bottom: 20px;
}
.myResourceViewInfo .attributes-section .item {
margin-bottom: 15px;
}
.h2.myResourceTitle {
font-weight: bold;
background: #9A3324 none repeat scroll 0px 0px;
width: 66%;
padding-left: 5px;
color: #FFF;
font-size: 18px;
vertical-align: middle;
display: inline-block;
position: relative;
height: 50px;
padding-top: inherit;
margin-top: 4px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.myResourceViewBody ul {
font-size: 1.2em;
font-weight: bold;
list-style-type: none;
margin-left: 300px;
padding: 0 0 0 10px;
}
<div id="myResourceHeader">
<h2 class="header-title myResourceTitle">Test article 1</h2>
</div>
<div class="myResourceViewBody">
<div class="myResourceSideBar">
<div class="myImageBox"></div>
<div class="myEvaluationArea">
<div class="myRatingBoxRed"></div>
<div class="myRatingBoxYellow"></div>
<div class="myRatingBoxGreen"></div>
</div>
</div>
<div class="myResourceViewInfo">
<h2 class="myViewInfo section-title"><i class="fa icon-info-sign"></i>Description</h2>
<ul>
<li>demo 1</li>
<li>demo 2</li>
</ul>
</div>
</div>
<div class="myResourceViewFooter"></div>

Answer 1

Check example below:
.row {
display: table;
width: 100%;
}
.row:after {
clear: both;
}
.col {
display: table-cell;
border: 1px solid red;
}
.width-70 {
width: 70%;
}
.width-30 {
width: 30%;
}
<div class="row">
<div class="col width-30">
col1
</div>
<div class="col width-70">
col2
</div>
</div>

Answer 2

Try using col-spans inside row
something like this
<div class="row">
<div class="col-md-6">
//first column
</div>
<div class="col-md-6">
// second column
</div>
</div>
refer to bootstrap classes for more details and how to make it responsive also.