Wrapping list text around another image in the list - html

Question

I have a profile section containing a list of text items. I want the text to wrap around the profile image.
Currently I have this fiddle: https://jsfiddle.net/3an39f3g/1/
I want the .desc text to sit under the job title, but then flow around the image and go to 100% width under the image.
Snippet:
ul li {
width: 400px;
list-style-type: none;
}
.name {
font-size: 15px;
color: black;
margin-bottom: 16px;
width: 40%;
float: left;
}
.job-title {
color: #7b7b7b;
font-size: 15px;
margin-bottom: 30px;
width: 40%;
float: left;
}
.desc {
font-size: 15px;
line-height: 27px;
width: 100%;
float: left;
}
img {
width: 45%;
margin-right: 10%;
float: left;
}
<li>
<ul>
<li><img src="http://www.clker.com/cliparts/0/P/y/1/z/v/placeholder-md.png"></img></li>
<li class="name">JOHN SMITH</li>
<li class="job-title">Job Title</li>
<li class="desc">Suspendisse blandit, mi et vehicula maximus, nisl justo pharetra ligula, vitae aliquam est nulla sed magna. Vivamus neque mi, ultricies ut felis nec, finibus vestibulum diam. Donec rhoncus orci at sem varius lacinia.</li>
</ul>
</li>

Answer 1

If you want the layout to work with any width, move the image outside the list containing the text.
New fiddle:
https://jsfiddle.net/okqmzrss/1/
Snippet:
ul li {
width: 400px;
list-style-type: none;
}
li img {
width: 45%;
margin-right: 10%;
display: inline;
float: left;
}
.name {
font-size: 15px;
color: black;
margin-bottom: 16px;
width: 40%;
float: left;
}
.job-title {
color: #7b7b7b;
font-size: 15px;
margin-bottom: 30px;
width: 40%;
float: left;
}
.desc {
font-size: 15px;
line-height: 27px;
width: 100%;
}
<li>
<img src="http://www.clker.com/cliparts/0/P/y/1/z/v/placeholder-md.png"></img>
<ul>
<li class="name">JOHN SMITH</li>
<li class="job-title">Job Title</li>
<li class="desc">Suspendisse blandit, mi et vehicula maximus, nisl justo pharetra ligula, vitae aliquam est nulla sed magna. Vivamus neque mi, ultricies ut felis nec, finibus vestibulum diam. Donec rhoncus orci at sem varius lacinia.</li>
</ul>
</li>

Answer 2

Try this jsfiddle
html:
<li>
<img src="http://www.clker.com/cliparts/0/P/y/1/z/v/placeholder-md.png"></img>
<div class="description">
<p class="name">JOHN SMITH</p>
<p class="job-title">Job Title</p>
<p class="desc">Suspendisse blandit, mi et vehicula maximus, nisl justo pharetra ligula, vitae aliquam est nulla sed magna. Vivamus neque mi, ultricies ut felis nec, finibus vestibulum diam. Donec rhoncus orci at sem varius lacinia. Suspendisse blandit, mi et vehicula maximus, nisl justo pharetra ligula, vitae aliquam est nulla sed magna. Vivamus neque mi, ultricies ut felis nec, finibus vestibulum diam. Donec rhoncus orci at sem varius lacinia.</li>
</p>
css:
li{
list-style-type: none;
}
img{
margin-right: 5%;
margin-bottom: 15px;
float: left;
}
.name {
font-size: 15px;
color: black;
margin-bottom: 16px;
}
.job-title {
color: #7b7b7b;
font-size: 15px;
margin-bottom: 30px;
}