Q:

Align image and text in the same line

I want to render image and text like in this pic in 2 rows and 2columns.  The gap between image and text on its right should be same when the browser width is re adjusted ( I am using media queries) (Desired apperance- http://i.imgur.com/qReaDlP.jpg).  The problem I am facing is when I scale the browser at some point the text gets mis-aligned.  It appears one line below the image. 

The html and css code are in the fiddle link below.  Any suggestion on what is going wrong is much appreciated.  I apologize to remove the actual text.  
div class="freedom_carousel">   <! --Freedom section -->

<p class="heading"> This is heading.  </p> 

<div class="container1">
<div class="col1"><img class="icon" src="/path/to/image" > <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span></div>
<div class="col2"><img class="icon" src="/path/to/image" > <span class="icon-text"><b>This is</b> Text Text Text TextText TextText TextText Text </span></div>
</div>  <! --End of container 1 -->

<div class="container2">
<div class="col1"><img class="icon" src="/path/to/image"  > <span class="icon-text"><b>Access </b> Text TextText TextText TextText TextText TextText TextText TextText Text</span></div>
<div class="col2"><img class="icon" src="/path/to/image" > <span class="icon-text"><b>This is</b> Text TextText TextText TextText TextText TextText TextText Text</span></div>
</div> <! --End of container 2 -->

</div>  

 
http://jsfiddle.net/zwqvo65f/
If you readjust the width of result window of fiddle, it reflects my explanation.  I hope that explains the problem better. 

A:

Change your HTML like this:
<div class="freedom_carousel">
    <! --Freedom section -->
    <p class="heading">This is heading.</p>
    <div class="container1">
        <div class="col1">
            <p>
                <img class="icon" src="/path/to/image" /> <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span>
            </p>
        </div>
        <div class="col2">
            <p>
                <img class="icon" src="/path/to/image" /> <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span>
            </p>
        </div>
    </div>
    <! --End of container 1 -->
    <div class="container2">
        <div class="col1">
            <p>
                <img class="icon" src="/path/to/image" /> <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span>
            </p>
        </div>
        <div class="col2">
            <p>
                <img class="icon" src="/path/to/image" /> <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span>
            </p>
        </div>
    </div>
    <! --End of container 2 -->
</div>
</div>
<! --End of Freedom carousel -->

and your CSS like this:
.freedom_carousel {
    border:2px solid red;
    float: left;
}
.freedom_carousel .heading {
    font-family:"HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "Helvetica";
    font-size: 20pt;
    color: #252525;
    font-style: normal;
    text-align: center;
    line-height: 24pt;
    letter-spacing: 0em;
}
.freedom_carousel .container1 {
    float:left;
    width:100%;
}
.freedom_carousel .container2 {
    float:left;
    width:100%;
    margin-top: 1%;
}
.freedom_carousel .col1 {
    float:left;
    margin-left: 13%;
    width:40%;
}
.freedom_carousel .col2 {
    float:left;
    width:40%;
}
.freedom_carousel .icon {
}
.freedom_carousel .icon-text {
    font-family:"HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "Helvetica";
    font-size: 16pt;
    color: #252525;
    font-style: normal;
    text-align: left;
    line-height: 22pt;
    letter-spacing: 0em;
    margin-left: 5%;
}
.  .features {
    border:2px solid red;
    float: left;
}
.features .heading {
    font-family:"HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "Helvetica";
    font-size: 20pt;
    color: #252525;
    font-style: normal;
    text-align: center;
    line-height: 24pt;
    letter-spacing: 0em;
}
.col1 p, .col2 p {
    display:block;
}
.col1 img, .col1 span, .col2 img, .col2 span {
    display:inline-block;
    float:none
}
.icon {
    width:10%;
}
.icon-text {
    width:80%
}

Fiddle here You will probably need to adjust the 2 last lines width values to your needs, but it will work anyways

