CSS-Grid can do that. [View full screen]

Of course this is not responsive as the image width is auto and so does not adjust to screen size (unless you want to, which is another issue).

#container {
  width: 97%;
  margin: 1rem auto;
  display: grid;
  grid-template-columns: max-content auto 1fr;
}

.part_one {
  vertical-align: top;
}

.part_two {
  margin: 0.3vw 0.2vw 0 0.1vw;
}

.part_two img {
}

.part_three {
  grid-row: 2;
  grid-column: 3;
}

<div id="container">            
    
        <span class="part_one">Some text, column accommodates text length,</span>
                
        <span class="part_two">
            <img src="http://www.fillmurray.com/284/196"><span class="comma">,</span>      
        </span>
                
        <span class="part_three">This section will only have text and fill available space left by previous text length and image width.  Positioned aligned to bottom of image, regardless of image height. All lines overflow and break like this when the text is long.</span>

</div> 

Trying to achieve something that I thought should be quite simple in HTML/CSS, although keep running into walls to get the layout as desired.

Essentially, I have three parts of content to put into a three column layout and I would like it to appear as a continuous sentence with an image in the middle. The text lengths and image sizes will vary and my goal is to make the width of the first two columns based on their content, then the last column to take the space left so the text will break.

Below is a diagram to show an example layout.

And an example of how each part should respond with different sized images:
xd.adobe.com/view/9a63781a-2514-4d75-926f-429d287c5f4e-cf30

Like so:

1. Short text (column width based on text length)
2. Landscape or Portrait Image (image size set in CSS, column width based on image width)
3. Longer text (column width fills available space left from first two columns)

Here is my fiddle and code:
https://jsfiddle.net/2020_RG/a10k5tf7/

HTML:

    <div id="container">            
        
            <span class="part_one">Some text, column accommodates text length,</span>
                    
            <span class="part_two">
                <img src="https://images.pexels.com/photos/1169754/pexels-photo-1169754.jpeg"><span class="comma">,</span>      
            </span>
                    
            <span class="part_three">This section will only have text and fill available space left by previous text length and image width.  Positioned aligned to bottom of image, regardless of image height. All lines overflow and break like this when the text is long.</span>

    </div> 

CSS:

    #container {
        width: 97%;
        margin: 1rem 1.4rem; 
    }
    
    .part_one {
      vertical-align: top; 
    }
    
    .part_two {
      margin: 0.3vw 0.2vw 0 0.1vw;
    }
    
    .part_two img {
      max-width: 46%;
    }
    
    .comma {
        margin: 0 0.4vw;
    }

It would appear that the last column doesn’t break as desired and instead runs onto the next line below the image.

Perhaps grouping this into a column or table is best, although how to keep the third column width taking the available space and be positioned off the image… some genius flex system?