Image with text inline and stop text wrapping

I think this can be done with floating the image, but I want to see if I can also do it using a suggested answer I seen on this site. That is using inline-block on both the image and span tag and using vertical align to put the text next to the image.

The problem I am having is if I add a paragraph after the span tag, or put too many words inside the span tag then all the text wraps underneath the image. I have tried different properties when I used a paragraph, but that doesn't do it.

The JSFiddle is here.

.iconswrapper {
  background-color: peachpuff;
  margin: auto;
  height: 150px;
  margin-top: 15px;
  width: 90%;
  text-align: center
}
.otherinfo {
  line-height: 2em;
  font-size: 1.5em
}
.wrapcon {
  text-align: left;
  width: 75%;
  background-color: #F6F6F6;
  padding: 3px 0 0 5px;
  margin-left: 10%;
}
.icon img {
  width: 60px;
  height: 50px;
  display: inline-block;
  vertical-align: middle
}
.icontitle {
  font-size: 1.1em;
  display: inline-block;
  vertical-align: top
}

<div class="iconswrapper">
  <span class="otherinfo">Other Services</span>
  <div class="wrapcon">
    <div class="icon">
      <img class="docs" src="https://i1.ytimg.com/vi/lqKYnb77jHY/default.jpg" />
      <span class="icontitle">Duck Cleaning. If you need a duck.Duck Cleaning. If you need a duck.Duck Cleaning. If you need a duck...</span>
    </div>
  </div>

If it is not possible using display inline block, does anyone know what the options are apart from floating the image and using clearfix?