title: Align image on left and text on right using css
body: <p>I need to align  image on left and text on right. I am using the following css.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {} #slideshow-nav {
    width: 700px;
    height: 30px;
    position: absolute;
    z-index: 999;
    bottom: 0;
    left: 11px;
    text-align: center;
    text-decoration: none;
  }
  #slideshow-nav a {
    background: transparent url('../Image/bullet_grey - 1.png') 0 0 no-repeat;
    width: 26px;
    height: 26px;
    text-indent: -999px;
    display: inline-block;
    text-decoration: none;
    margin: 7px;
    text-indent: -9999px !important;
    margin: 7px;
    text-decoration: none;
    background-position: center;
    border: none;
    outline: none;
  }
  #slideshow-nav a.activeSlide {
    background-position: 0 -1000px;
    background: transparent url('../Image/bullet_red.png') 0 0 no-repeat;
    display: inline-block;
    background-position: center;
    text-decoration: none;
    border: none;
    outline: none;
  }
  .page-slideshow {
    position: relative;
    margin-bottom: 15px;
    text-decoration: none;
    background: #d4ecef;
  }
  .page-slideshow.narrow #slideshow-nav {
    width: 460px;
    left: 0;
    text-decoration: none;
  }
  .di-hero {
    background: transparent;
    width: 718px;
    height: 300px;
    background-position: 11px 0;
    background-repeat: no-repeat;
  }
  p.more {
    margin: 8px 0 0 0;
    float: right;
    overflow: hidden;
    color: #BC1E04;
    text-decoration: none;
    color: #bc1e04;
    margin: 5px 0 0 0;
    text-align: center;
    float: right;
  }
  h3 {
    display: block;
    color: #514c44;
    font: 18px/24px Georgia, "Times New Roman", Palatino, "Palatino Linotype", "Book Antiqua", serif;
    margin: 0 0 10px 0;
    float: right;
    overflow: hidden;
    text-decoration: none;
    margin: 5px 0 0 0;
    text-align: center;
    float: right;
  }
  div.slide-content img {
    margin: 0 20px 0 0;
    border: 5px solid #5999a2;
  }
  p {
    color: #2e2e2a;
    margin: 0 0 10px 0;
    float: right;
    overflow: hidden;
    text-decoration: none;
    font: 12px/18px Helvetica, "Lucida Sans", "Trebuchet MS", Arial, Verdana, sans-serif;
    text-align: center;
    float: right;
  }
  p.more:hover {
    text-decoration: underline;
  }
  .slide-content {
    width: 718px;
    height: 300px;
    background-position: 11px 0;
    background-repeat: no-repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="page-slideshow narrow"&gt;
    &lt;div class="hero di-hero"&gt;
      &lt;div&gt;
        &lt;a href="" title="Delicious Ideas from AllRecipes.com"&gt;
          &lt;div class="slide-content"&gt;
            &lt;img src="" width="152" height="150" alt="Delicious Ideas from AllRecipes.com"&gt;
            &lt;h3&gt;Delicious Ideas from AllRecipes.com&lt;/h3&gt;
            &lt;p&gt;BI-LO has teamed up with AllRecipes.com to provide enhanced recipe searches, regionally inspired recipes, ratings, videos and more.&lt;/p&gt;
            &lt;p class="more"&gt;Find the perfect recipe&lt;/p&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="" title="Meal Planning    Made       Simple"&gt;
          &lt;div class="slide-content"&gt;
            &lt;img src="." width="152" height="150" alt="Meal Planning Made Simple"&gt;
            &lt;h3&gt;Meal Planning Made Simple&lt;/h3&gt;
            &lt;p&gt;Whether you're preparing a romantic valentine's dinner or having friends over to watch the big game, our meal planning guide can help.&lt;/p&gt;
            &lt;p class="more"&gt;Start planning today&lt;/p&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="" title="Improve Your Wine &amp; Beer IQ"&gt;
          &lt;div class="slide-content"&gt;
            &lt;img src="" width="152" height="150"&gt;
            &lt;h3&gt;Improve Your Wine &amp; Beer IQ&lt;/h3&gt;
            &lt;p&gt;The right glass of wine or beer can turn a good meal into a great one. Let us help you take the mystery out of beer and wine shopping.&lt;/p&gt;
            &lt;p class="more"&gt;Learn the basics of wine and beer&lt;/p&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="" title="Learn How to Pick the Perfect Meat"&gt;
          &lt;div class="slide-content"&gt;
            &lt;img src="." width="152" height="150" alt="Learn How to Pick the Perfect Meat"&gt;
            &lt;h3&gt;Learn How to Pick the Perfect Meat&lt;/h3&gt;
            &lt;p&gt;We’ve got all of the information you need to help you choose the right type of meat for your meal.&lt;/p&gt;
            &lt;p class="more"&gt;See our meat and seafood guide&lt;/p&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="slideshow-nav"&gt;
      &lt;div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now my image is on the Left and text on the right. But it is not properly aligned. I need text on the same line and on the right to the image. Which style element is missing ..? please  help me.</p>