Custom CSS for a Blog List - html

Question

I am currently creating a PHP based Website which needs to list the Programmes... I tried creating a custom CSS code by myself, tried breaking templates to get the CSS. But everything failed. So could somebody help me get the CSS code for a div which look like the one given below
I would add the classes for buttons and other icons by myselves. I just want the div which is also reponsive. I am not much expert in CSS. I only want the alignment. Not the fancy elements inside it.

Answer 1

I have made fiddle here please check this out, hope you can edit the fiddle based on your needs
HTML
<div class='customHeight'>
<div class='row'>
<div class='col-sm-6 custom'>
<div class='dateHolder'>27 Nov</div>
</div>
<div class='col-sm-6'>
<div class='row '>
<h3>Some title goes here</h3>
</div>
<div class="row bottomGap">location / date goes here</div>
<div class="row bottomGap">Content goes here Content goes here
Content goes here Content goes here Content goes here Content goes
here Content goes here Content goes here Content goes here</div>
<div class='row'>
<button class="btn btn-default">
Buy Tickets
<button>
<button class="btn btn-danger">
Buy Tickets
<button>
</div>
</div>
</div>
CSS :
*
.bottomGap{
margin-bottom:5px;
}
.custom {
background-color: #ccc;
height:200px;
}
.customHeight{
height:200px;
}
.dateHolder{
height:80px;
width:50px;
background-color:#000;
padding-top:10px;
padding-left:10px;
}
*

Answer 2

How about something like this:
* { box-sizing: border-box }
.c {
height: 150px;
width: 500px;
background-color:#eee;
margin: 5px;
padding: 10px;
}
.c:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.c > div {
padding: 5px;
height:100%;
}
.c > div:first-child {
float:left;
width: 30%;
background-color:#aaa;
margin:0 0 0 0;
}
.c > div:last-child {
float:left;
width: 70%;
background-color:#ddd;
}
<div class="c">
<div>left</div>
<div>right</div>
</div>