Aligning text around images using HTML and CSS

Question

I have the following issue involving the placement of text around an image using CSS and HTML. The way I've written it works as long as the text doesn't pass the image. The problem is that as soon as it "overflows" beyond the bottom of the image, it justifies all the way left and looks really sloppy.

How can I keep the text below the bottom of the image aligned with the previous text?

Note: I had to remove my original photo to prevent sharing personal information, and the replacement photo ended up being a little bit taller, so I had to copy and paste the text a few times to make it long enough to show what I'm talking about.

Here's the jsfiddle example including all my code: https://jsfiddle.net/dLa9jgcm/2/

 .photo { float: left; height: 200px; width: 200px; margin-right: 20px; overflow: hidden; } .photo img { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width: 100%; } .info {} .info h2, #header h2 { text-transform: uppercase; letter-spacing: 2px; margin-bottom: .3em; } .info h4, #header h4 { color: #999; } 

 <div id="tab-data-wrap"> <!-- About Tab Data --> <div id="about"> <section class="clearfix"> <div class="g2"> <div class="photo"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Olympic_rings_without_rims.svg/342px-Olympic_rings_without_rims.svg.png" alt="Olympic Rings"> </div> <div class="info"> <h2> Zeus </h2> <h4> Associate Financial Advisor </h4> <p>Providing expert advice and guidance on investments and retirement planning in conjunction with high level service to individuals and families so that they have the peace-of-mind to pursue other important endeavors throughout their lives. Providing expert advice and guidance on investments and retirement planning in conjunction with high level service to individuals and families so that they have the peace-of-mind to pursue other important endeavors throughout their lives. Providing expert advice and guidance on investments and retirement planning in conjunction with high level service to individuals and families so that they have the peace-of-mind to pursue other important endeavors throughout their lives.</p> <br> I am a Certified Financial Planner (CFP®). </div> 

Answer 1

Here u go JSFiddle link

.info{
    float: left;
    width: calc(100% - 220px);/*value should be equal to width of image along with margin*/
}

Answer 2

All you need to add is:

.g2 {
   display: flex;
}
.photo {
  min-width: 25%;
}

 .photo{ float: left; height: 200px; width: 200px; margin-right: 20px; overflow: hidden; } .photo img{ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width: 100%; } .info{ } .info h2, #header h2{ text-transform: uppercase; letter-spacing: 2px; margin-bottom: .3em; } .info h4, #header h4{ color: #999; } .g2 {display: flex;} .photo { min-width: 25%; } 

 <div id="tab-data-wrap"> <!-- About Tab Data --> <div id="about"> <section class="clearfix"> <div class="g2"> <div class="photo"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Olympic_rings_without_rims.svg/342px-Olympic_rings_without_rims.svg.png" alt="Olympic Rings"> </div> <div class="info"> <h2> Zeus </h2> <h4> Associate Financial Advisor </h4> <p>Providing expert advice and guidance on investments and retirement planning in conjunction with high level service to individuals and families so that they have the peace-of-mind to pursue other important endeavors throughout their lives. Providing expert advice and guidance on investments and retirement planning in conjunction with high level service to individuals and families so that they have the peace-of-mind to pursue other important endeavors throughout their lives. Providing expert advice and guidance on investments and retirement planning in conjunction with high level service to individuals and families so that they have the peace-of-mind to pursue other important endeavors throughout their lives.</p> <br> I am a Certified Financial Planner (CFP®). </div> 

See it here (SO snippets seems down): https://jsfiddle.net/websiter/9d40ap7c/

Feel free to provide the image min-width in any unit you want if you want it fixed size.