CSS align three divs horizontally - css

Question

I'm having an issue aligning three divs inside a parent div, the effect I need is the following
|IMAGE| +TEXT+ |IMAGE|
Each div contains an Image (2) and the text (1) respectively. Aligning them is easy, the problem is that I want the CENTER div to auto width to the size of the browsers' window and keep the other IMAGE divs always on the right and left side respectively.
Something like this for example, if the user maximizes the window:
|IMAGE| +++++++++++++++++++TEXT++++++++++++++++++++++++ |IMAGE|
As you can see, the idea is that the center div grows, and auto width but keeping the structure.
How could I get that behaviour? Thanks in advance.

Answer 1

#container { text-align: center; }
#div-1 { float: left; }
#div-2 { display: inline; }
#div-3 { float: right; }
If that still doesn't behave how you want, please give more detailed requirements.

Answer 2

Here is another inline implementation for three images side by side:
<div style="text-align:center">
<div style="float: left"><img src="image1.png"/></div>
<div style="display: inline"><img src="image2.png"/></div>
<div style="float: right"><img src="image3.png"/></div>
</div>

Answer 3

This works rather well as well.
.container{width: 100%; padding: 5px;}
.fig-left {float: left;}
.text {float: left;}
.fig-right{float: right;}
/* add margins maybe */
.text, .fig-right, p{margin: .75em;}
and HTML https://codepen.io/tradesouthwest/pen/MWELwGN to test
<div class="container">
<div class="fig-left">
<img src="https://picsum.photos/id/1055/200/300"/>
</div>
<div class="text">
<p>ABCDEFGHIJKLMNOP don't forget the alt in images QRSTUVWXYZ</p>
</div>
<div class="fig-right">
<img src="https://picsum.photos/id/1055/200/300"/>
</div>
</div>