String with 'display: inline-block;' won't break into lines - html

Question

I basically want a picture on the left and text on the right. It's actually sort of working already. The problem is if the text were any longer, instead of the text breaking into lines, the whole string just goes below the image. These are my simplified HTML/CSS structures:
.course-profile {
min-width: 300px;
padding:18px;
margin: 5px;
margin-top: 15px;
height: 350px;
}
.course-profile img, .course-profile p.profile-name {
display: inline-block;
vertical-align: middle;
}
.course-profile img {
width:75px;
height:75px;
margin-right: 5px;
}
<div class="col-sm-12">
<div class="row">
<div class="course-profile col-sm-4">
<a href="">
<img src="http://lonestarmediasa.com/wp-content/uploads/2014/11/smiley-face-clip-art15.jpg" class="img-responsive img-circle"/>
<p class="profile-name">Let's make this a slightly long sentence hahaha. This is a simplified version of my code.</p>
<p>Other stuff not inline.</p>
</a>
</div>
</div>
</div>
I tried reading through docs and through SO, trying things like floats (which mess up the parts not inline), word-wraps/word-breaks, etc. But none have succeeded. This problem seems like it should be easy, but I can't figure it out. :/

Answer 1

I think you want to float the image to the left (or right). This is actually what float was designed to do, float an image in a block of inline text. Most things that we use float for these days was originally unintended use.
.left {
float: left;
}
.right {
float: right;
}
.clear:after,
.clear:before {
content: " ";
display: table;
float: none;
clear: both;
}
.img {
width: 100px;
height: 100px;
display: inline;
background: red;
margin: 15px;
}
.description {
display: inline;
}
<section class="clear">
<div class="img left"></div>
<p class="description">Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<section>
Note that because we are floating things we need to make sure we are also cleaning up after ourselves by clearing things afterwards with the clear: both; declaration. The clearfix I used was inspired by Nicolas Gallagher's micro clearfix hack