Image with text at the left and a container at right - html

Question

I created a page having a banner. The banned contains the title of the page at the left and a box having text and two buttons inside at the right.
The page is completely responsive except the banner because i am not sure how to use top and left while keeping things responsive.
HTML
<div class="banner_container">
<img src="img/banner_1.png">
</div>
<div class="col-md-12">
<div class="col-md-7">
<div class="banner-title"><strong>WAKE UP IN BALI</strong></div>
</div>
<div class="col-md-3 trip_inclusions">
<div class="inclusions_price">
<div class="total_nights">
<div class="number_of_nights">12 </div> NIGHTS
</div>
<div class="price_grid_wrapper">
<div class="starting_from">STARTING FROM </div>
<div class="tour_price">
<div class="dollar_price_wrapper">
<div class="dollar_logo">$</div>
<div class="price_text">1250</div>
</div>
<div class="price_tax_text">TAXES INCL/PERS</div>
</div>
</div>
</div>
<div class="inclusions_details">
<div class="package_includes_title">PACKAGE INCLUDES</div>
<div class="includes_content">
<p>+ INTERNATIONAL FLIGHTS</p>
<p>+ WELCOME & TRANSFERS</p>
<p>+ HOTEL(12 NIGHTS)</p>
<p>+ BREAKFASTS</p>
<p>+ EXCURISIONS</p>
</div>
</div>
<div class="package_buttons">
<div class="share_package">SHARE PACKAGE +</div>
<div class="all_packages"> < ALL PACKAGES </div>
</div>
</div>
</div>
CSS:
.banner_container img{
width: 100%;
}
.banner-title{
font-size: 160%;
color: white;
text-shadow: 0 1px gray, 1px 0 gray, -1px 0 gray;
margin: 48px 25px;
display: block;
position: absolute;
top: 0;
}
.trip_inclusions{
padding: 2px;
top: 1em;
position: absolute;
left: 20em;
}
.inclusions_price {
background-color: #00467e;
overflow: auto;
padding: 3px;
color: white;
margin: 0 auto;
display: inline-block;
width: 80%;
}
.total_nights {
width: 24%;
text-align: center;
border-right: 1px solid #fff;
float: left;
margin-right: 10px;
font-size: 0.95em;
}
.number_of_nights{
font-size: 3.8em;
margin-bottom: -13px;
margin-top: -10px;
}
.price_grid_wrapper {
width: 100%;
margin: 0 auto;
display: block;
}
.starting_from {
width: 8%;
float: left;
margin-right: 4em;
font-size: .95em;
margin-top: 2px;
}
.tour_price {
float: left;
width: 40%;
}
.dollar_price_wrapper{
display: block;
margin: 0 auto;
}
.dollar_logo{
float: left;
font-size:1.5em;
}
.price_text{
float: left;
font-size: 3em;
margin-top: -10px;
}
.price_tax_text{
text-align: center;
margin-bottom: 3px;
font-size: .9em;
}
.inclusions_details{
background-color: #fff;
overflow: auto;
margin-top: -5px;
width: 80%;
}
.package_includes_title{
color: #399fff;
font-size: 20px;
margin-left: 10px;
margin-top: 11px;
}
.includes_content{
color: black;
font-size: 16px;
margin-left: 15px;
line-height: 16px;
margin-top: 6px;
}
.package_buttons{
margin:0 auto;
display: block;
}
.share_package{
background-color: #399fff;
padding: 10px;
color: white;
font-size:1em;
float: left;
width:40%;
text-align: center;
}
.all_packages{
background-color: #ffffff;
padding: 10px;
width:40%;
color: #00467e;
font-size:1em;
float: left;
text-align: center;
}
.share_package a{
color: white;
}
.share_package a:hover{
color: white;
}
Please have a look at the JsFiddle. Its not responsive at all also you will see the right container is big, ignore that i`ll fix it but i want text at left and container at right and image at the back and keep it responsive.
Note: I could have used backgroundurl() but i didnt as i am planning to replace the background image with a slider so i need it in a separate
Thanks !!!